cssでborder-bottomを取り除く方法は？ CSSで<strong>テスト</strong>テキストに<strong>李</strong>ときにマウスホバーで<strong>テスト</strong>テキストの下にいるのborder-bottomを取り除くためにどのように

Question

？

HTML：

 <div class="rank"> 
     <ul> 
      <li class="tab1 active">test</li> 
      <li class="tab2">one</li> 
     </ul> 
    </div> 
<div class="content">....</div> 

私のスタイル（それはテストテキストの下に下を取り除くしないです）：

.active{ 
background-color:#FFFFFF; 
} 
rank ul li{ 
float:left; 
border:1px solid #D5D5D5; 
border-bottom:none; 
} 

.content{ 
clear:both; 
border-top:1px solid #D5D5D5; 
} 

PS：私はoverflow:hiddenrankにdiv要素を使用する理由、それフロートをcontent divに防ぐことができますか？

Answer 1

@ zhuanzhou;私の例では、私はclear floated子要素のclear:both代わりのoverflow:hiddenを使用しています：あなたは一例

.rank ul{ 
    border-bottom:1px solid #D5D5D5; 
} 
.clr{ 
    clear:both; 
} 
.active{ 
background-color:#FFFFFF; 
padding-bottom:1px; 
margin-bottom:-1px; 
} 
.rank ul li{ 
float:left; 
border:1px solid #D5D5D5; 
border-bottom:none; 
    margin-right:10px; 
} 

.content{ 
clear:both; 
border-top:1px solid #D5D5D5; 
} 

チェックライブデモhttp://jsfiddle.net/PBBED/

NOTEためmarginpadding でプレイしているかもしれません。あなたのCSSの

Answer 2

.active { 
    background-color: #ffffff; 
    border-bottom: 1px solid #ffffff; 
    margin-bottom: -1px; 
} 

Answer 3

削除ライン7その後、CSSの擬似クラスを使用して新しいセレクタを起動します。それは、タグの上にある場合を除き、古いブラウザはそれを無視します、が、最後に

rank ul li:hover { 
    border-bottom: none; 
} 

を合わせます。

Answer 4

.active{ 
background-color:#FFFFFF; 
} 
ul li{ 
    display:inline; 
} 
li{ 
    border-bottom:1px solid; 
} 
li:hover{ 
    border-bottom:none; 
} 

.content{ 
clear:both; 
border-top:1px solid #D5D5D5; 
}