css - 如何制作tab效果，其中li下边框为白色

Question

正如你在这个小提琴中看到的那样，我正在尝试创建一个标签效果：http: //jsfiddle.net/kZTUK/

问题是处于活动状态的 li 需要有一个白色的底部边框，以使其实际上看起来像一个选项卡。

在将 li 保留为块的同时，我无法弄清楚这是如何完成的（出于其他原因，我需要将它们作为 display:block 。）

任何的想法。谢谢，

<style>
.item-list {
border-bottom: 1px solid grey;
overflow: hidden;
}

li {
display: block;
float: right;
margin: 0 30px 0 0;
padding: 5px 10px;    
}

li.active {
border:1px solid black; 
border-bottom:none;     
}
</style>

<div class="item-list">
   <ul class="my_ul">
      <li class="first active">one</li>
      <li class="">two</li>
      <li class="">three</li>
      <li class="last">four</li>
   </ul>
</div>

Answer 1

在不过多调整代码的情况下，您可以在 .item-list 类中将溢出更改为静态高度。

.item-list {
 border-bottom: 1px solid grey;
height: 31px;
}
li {
display: block;
float: right;
margin: 0 30px 0 0;
padding: 5px 10px;
}
li.active {
border:1px solid black; 
border-bottom: 2px solid #fff;
}

http://jsfiddle.net/HEUqC/12/

Answer 2

将您的静态高度更改.item-list为 30 - 1 = 29px ，以便边框重叠，然后将底部边框设置为白色而不是无。

.item-list {
    border-bottom: 1px solid grey;
    height: 29px;
}
li {
    display: block;
    float: right;
    margin: 0 30px 0 0;
    padding: 5px 10px;
}
li.active {
    border:1px solid black;
    border-bottom: 1px solid white;
}

http://jsfiddle.net/kZTUK/4/

Answer 3

注意背景颜色：

<div class="item-list">
 <ul class="my_ul">
  <li class="first active">one</li>
  <li class="">two</li>
  <li class="">three</li>
  <li class="last">four</li>
 </ul>
</div>

.item-list {
  border-bottom: 1px solid grey;
  height: 31px;
}

li {
  display: block;
  float: right;
  margin: 0 30px 0 0;
  padding: 5px 10px;    
}

li.active {
  border:1px solid black; 
  border-bottom: solid white;
  background-color: white;
}