css - 标签 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;
}