如何通过CSS摆脱边界底部？

how to get rid of the border-bottom which under test text in the li when the mouse hover on the test text by css?

当鼠标悬停在css的测试文本上时，如何摆脱li中测试文本的边框底部？

the html :

html：

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

my style(it's doesn't get rid of the bottom under test text):

我的风格（它没有摆脱测试文本底部）：

.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: why when i use overflow:hidden to rank div, it can prevent the float to the content div?

ps：为什么当我使用overflow：hidden来对div进行排名时，它可以阻止浮动到内容div？

4 个解决方案

#1

@zhuanzhou; may be you have to play with margin padding for example

@zhuanzhou;例如，您可能需要使用边距填充

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

check live demo http://jsfiddle.net/PBBED/

查看现场演示http://jsfiddle.net/PBBED/

NOTE:in my example i am using clear:both instead of overflow:hidden for clear floated child element.

注意：在我的例子中我使用clear：both而不是overflow：隐藏为clear floated子元素。

#2

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

#3

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

#4

-1

Remove line 7 in your css then start a new selector using the css psuedo class :hover at the end

删除css中的第7行然后使用css psuedo类启动一个新的选择器：在最后悬停

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

Although, older browser will disregard that unless it is on an a tag.

虽然旧的浏览器会忽略它，除非它在一个标签上。

#1