У меня нет большого опыта работы в CSS, я в надежде найти помощь здесь :)Вкладки 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);
}
пожалуйста, напишите соответствующий HTML. и скрипка. –
все, что я вижу, это css .. any html? jsfiddle хорош – abbood
Альтернатива, которую вы можете использовать - http://twitter.github.com/bootstrap/javascript.html#tabs, соответствующий результат требует HTML, без Html это не поможет. – Manoj