2013-03-06 4 views
0

У меня нет большого опыта работы в CSS, я в надежде найти помощь здесь :)Вкладки CSS модификация

моих поддержку блог вкладки элементов, и это то, как он выглядит

current tabs in my blog

Я пытаюсь снять правую и левую границы, которая окружает содержимое вкладки и сделать его выглядеть так

Желаемая выход (вкладка граница (горизонтальная) линия расширяется по обе стороны страницы)

enter image description here

/* 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); 
} 
+1

пожалуйста, напишите соответствующий HTML. и скрипка. –

+1

все, что я вижу, это css .. any html? jsfiddle хорош – abbood

+0

Альтернатива, которую вы можете использовать - http://twitter.github.com/bootstrap/javascript.html#tabs, соответствующий результат требует HTML, без Html это не поможет. – Manoj

ответ

0

Изменить на:

/* 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; 
} 
+0

это действительно сработало! Спасибо – Deano

Смежные вопросы