私は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);
}