css - 如何制作制表符效果，其中 li 底部边框为白色

Question

我正在尝试创建标签效果，如您在这个 fiddle 中所见:http://jsfiddle.net/kZTUK/

问题是事件的 li 需要有一个白色的底部边框，这样才能让它看起来像一个标签。

我不知道这是如何在将 li 保持为 block 的同时完成的(出于其他原因我需要它们作为 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/