如何通過css擺脫border-bottom？

enter image description here 如何通過css擺脫border-bottom？

如何讓在李下測試文本擺脫了邊框底部，其中當在測試文本通過CSS鼠標懸停？

的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:hidden到rank DIV，它可以防止浮動到content股利？

來源

2011-07-23 zhuanzhou

@zhuanzhou;可能是你有marginpadding 發揮例如

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

注：在我的例子，我使用clear:both，而不是overflow:hidden爲clear floated子元素。在你的CSS

來源

2011-07-23 08:52:37 sandeep

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

來源

2011-07-23 08:54:33 nobody

-1

刪除行7，然後開始使用CSS僞類的新選擇：徘徊在年底

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

雖然舊的瀏覽器會忽略，除非它是一個標籤。

來源

2011-07-23 08:54:43 marcnewport

.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; 
}

來源

2011-07-23 10:36:28

如何通過css擺脫border-bottom？

回答

相關問題