Wie wird man den Rand am unteren Rand mit CSS los?

Question

wie man den unteren Rand loswird, der unter Test Text in der li wenn der Mauszeiger über das Test text by css?

die html :

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

mein Stil (der untere Teil unter dem Testtext wird nicht entfernt):

.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: warum, wenn ich overflow:hidden a rank div, kann es den Float zum content div?

Answer 1

@zhuanzhou; vielleicht müssen Sie mit margin padding zum Beispiel

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

Live-Demo ansehen http://jsfiddle.net/PBBED/

ANMERKUNG In meinem Beispiel verwende ich clear:both 代わりに overflow:hidden für clear floated Kind-Element.

Answer 2

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

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

Answer 4

Entfernen Sie Zeile 7 in Ihrem CSS und fügen Sie einen neuen Selektor mit der CSS-Psuedo-Klasse :hover am Ende ein

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

Ältere Browser ignorieren dies jedoch, es sei denn, es handelt sich um ein a-Tag.