tab CSS đơn giản - cần phải phá vỡ biên giới trên tab hoạt động

Question

Tôi muốn tạo ra một phong cách tab rất đơn giản mà trông như thế này:

_____ _____ _____ 
_|_____|_|  |_|_____|______________ 

Vì vậy, về cơ bản thì có đường viền ngang trên hộp bounding mà phá vỡ cho tab hoạt động. Tôi đang sử dụng danh sách cơ bản, với CSS sau, nhưng đường viền ngoài luôn xuất hiện trên các tab riêng lẻ. Tôi đã thử nhiều vị trí và chỉ mục z cũng như không có kết quả.

ul.tabHolder { 
    overflow: hidden; 
    clear: both; 
    margin: 1em 0; 
    padding: 0; 
    border-bottom: 1px solid #666; 
} 
ul.tabHolder li { 
    list-style: none; 
    float: left; 
    margin: 0 3px -1px; /* -1 margin to move tab down 1px */ 
    padding: 3px 8px; 
    background-color: #444; 
    border: 1px solid #666; 
    font-size: 15px; 
} 
ul.tabHolder li.active { 
    background-color: #944; 
    border-bottom: 1px solid #944; 
} 

Answer 1

Hãy thử this solution bởi Eric Meyer.

Nội dung bên dưới được sao chép từ trang web để đảm bảo câu trả lời vẫn hợp lệ nếu trang web đóng, thay đổi hoặc ngắt.

HTML

<div id="navcontainer"> 
    <ul id="navlist"> 
     <li id="active"><a href="#" id="current">Item one</a></li> 
     <li><a href="#">Item two</a></li> 
     <li><a href="#">Item three</a></li> 
     <li><a href="#">Item four</a></li> 
     <li><a href="#">Item five</a></li> 
    </ul> 
</div> 

CSS

#navlist 
{ 
    padding: 3px 0; 
    margin-left: 0; 
    border-bottom: 1px solid #778; 
    font: bold 12px Verdana, sans-serif; 
} 

#navlist li 
{ 
    list-style: none; 
    margin: 0; 
    display: inline; 
} 

#navlist li a 
{ 
    padding: 3px 0.5em; 
    margin-left: 3px; 
    border: 1px solid #778; 
    border-bottom: none; 
    background: #DDE; 
    text-decoration: none; 
} 

#navlist li a:link { color: #448; } 
#navlist li a:visited { color: #667; } 

#navlist li a:hover 
{ 
    color: #000; 
    background: #AAE; 
    border-color: #227; 
} 

#navlist li a#current 
{ 
    background: white; 
    border-bottom: 1px solid white; 
} 

về mã Một số danh sách trong trang web Listamatic phải được sửa đổi để họ có thể làm việc trên mô hình danh sách đơn giản Listamatic của. Khi nghi ngờ, hãy sử dụng tài nguyên bên ngoài trước tiên hoặc ít nhất là so sánh cả hai mô hình để xem mô hình nào phù hợp với nhu cầu của bạn.

Answer 2

Thay đổi mã hiện tại của bạn càng ít càng tốt - cố gắng display: inline-block cho li thẻ, với biên giới trên một container .menudiv:

.menu { 
    border-bottom: 1px solid #666; 
} 
ul.tabHolder { 
    overflow: hidden; 
    margin: 1em 0 -2px; 
    padding: 0; 
} 
ul.tabHolder li { 
    list-style: none; 
    display: inline-block; 
    margin: 0 3px; 
    padding: 3px 8px 0; 
    background-color: #444; 
    border: 1px solid #666; 
    font-size: 15px; 
} 
ul.tabHolder li.active { 
    background-color: #944; 
    border-bottom-color: #944; 
} 

HTML dùng để minh họa (thêm div ở phía dưới để hiển thị trộn của tab hoạt động vào div màu):

<div class="menu"> 
    <ul class="tabHolder"> 
     <li>Menu 1</li> 
     <li class="active">Menu 2</li> 
     <li>Menu 3</li> 
    </ul> 
</div> 
<div style="background-color: #944; height: 1em"> 

Answer 3

.tab { 
 
    display: inline-block; 
 
    background-color: #aaa; 
 
    padding: 4px; 
 
    border: 1px solid #888; 
 
    border-bottom: none; 
 
    
 
    position: relative; 
 
    bottom:-1px; 
 
    z-index: -1; 
 
} 
 

 
.tab-body { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 200px; 
 
    padding: 4px; 
 
    background-color: #ccc; 
 
    border: 1px solid #888; 
 
    z-index: 1; 
 
} 
 

 
.tab.active { 
 
    background-color: #ccc; 
 
    z-index: 2; 
 
}

<div class="tab tab1">Tab 1</div> 
 
<div class="tab tab2 active">Tab 2</div> 
 
<div class="tab tab3">Tab 3</div> 
 

 
<div class="tab-body">Tab Body</div>