標籤CSS修改

Question

我沒有在CSS很多經驗，我希望能找到幫助這裏:)

我的博客支撐片的元素，這是它的外觀

我試圖刪除圍繞標籤內容的左右邊界，使它看起來像這樣

所需的輸出（標籤邊框（水平）線跨頁擴展兩個方向）

/* Tabs 
====================================*/ 
.tabs-nav { 
list-style: none; 
margin: 0; 
overflow: hidden; 
padding: 0; 
width: 100%; 
} 

.tabs-nav li { 
float: left; 
line-height: 38px; 
overflow: hidden; 
padding: 0; 
position: relative; 

} 

.tabs-nav li a { 
background-color: #f8f8f8; 
border: 1px solid #e0e0e0; 
border-right: none; 
color: #888; 
font-weight: 500; 
display: block; 
letter-spacing: 0; 
outline: none; 
padding: 0 20px; 
text-decoration: none; 
-webkit-transition: all 200ms ease-in-out; 
-moz-transition: all 200ms ease-in-out; 
-o-transition: all 200ms ease-in-out; 
-ms-transition: all 200ms ease-in-out; 
transition: all 200ms ease-in-out; 
} 

.tabs-nav li:first-child a { border-left: 1px solid #e0e0e0; } 
.tabs-nav li:last-child a { border-right: 1px solid #e0e0e0; } 

.tabs-nav li.active a { color: #333; font-weight: 500; } 
.tabs-nav li.active i:before { color: #555; } 

.tabs-nav li i:before { color: #909090; } 
.tabs-nav li span { margin-left: -7px; } 
.tabs-nav li.active a i {opacity: 1; filter: alpha(opacity=100);} 
.tabs-nav li i {opacity: 0.64; filter: alpha(opacity=64); margin: 10px 0 0 0; } 

.tabs-nav li a:hover { background: #fff; } 

.tabs-nav li.active a { 
background: #fff; 
border-bottom: 1px solid #fff; 
} 

.tab-content {padding: 20px;} 
.shop-page .tab-content table p, 
.tab-content p { margin: 0px;} 
.shop-page .tab-content p { 
margin-bottom: 20px; 
} 
.tabs-container { 
border: 1px solid #e0e0e0;; 
margin: -1px 0 20px; 
overflow: hidden; 
width: 100%; 
line-height: 21px; 
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03); 
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03); 
} 

Answer 1

更改爲：

/* Tabs 
====================================*/ 
.tabs-nav { 
list-style: none; 
margin: 0; 
overflow: hidden; 
padding: 0; 
width: 100%; 
} 

.tabs-nav li { 
float: left; 
line-height: 38px; 
overflow: hidden; 
padding: 0; 
position: relative; 

} 

.tabs-nav li a { 
background-color: #f8f8f8; 
border: 1px solid #e0e0e0; 
border-right: none; 
color: #888; 
font-weight: 500; 
display: block; 
letter-spacing: 0; 
outline: none; 
padding: 0 20px; 
text-decoration: none; 
-webkit-transition: all 200ms ease-in-out; 
-moz-transition: all 200ms ease-in-out; 
-o-transition: all 200ms ease-in-out; 
-ms-transition: all 200ms ease-in-out; 
transition: all 200ms ease-in-out; 
} 

.tabs-nav li:first-child a { border-left: 1px solid #e0e0e0; } 
.tabs-nav li:last-child a { border-right: 1px solid #e0e0e0; } 

.tabs-nav li.active a { color: #333; font-weight: 500; } 
.tabs-nav li.active i:before { color: #555; } 

.tabs-nav li i:before { color: #909090; } 
.tabs-nav li span { margin-left: -7px; } 
.tabs-nav li.active a i {opacity: 1; filter: alpha(opacity=100);} 
.tabs-nav li i {opacity: 0.64; filter: alpha(opacity=64); margin: 10px 0 0 0; } 

.tabs-nav li a:hover { background: #fff; } 

.tabs-nav li.active a { 
background: #fff; 
border-bottom: 1px solid #fff; 
} 

.tab-content {padding: 20px;} 
.shop-page .tab-content table p, 
.tab-content p { margin: 0px;} 
.shop-page .tab-content p { 
margin-bottom: 20px; 
} 
.tabs-container { 
border-top-width:1px; 
border-right-width:0px; 
border-bottom-width:0px; 
border-left-width:0px; 
margin: -1px 0 20px; 
overflow: hidden; 
width: 100%; 
line-height: 21px; 
}