0

このフィドルでわかるように、タブ効果を作成しようとしています: 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>
4

3 に答える 3

2

コードをあまり調整せずに、overflow を .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/

于 2013-03-06T18:15:25.420 に答える
0

.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/

于 2013-03-06T18:20:06.613 に答える
0

背景色に注意してください。

<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;
}
于 2013-03-06T18:26:43.793 に答える