html - 如何调整浮动元素的位置？

Question

我有一个ul包裹在一个.box. 我已经为.box. 这些ul项目也有底部边框，我希望li边框放在.box边框上，这样.box边框就不再可见了。我试图通过设置来做到这一点，margin-bottom: -1px但不起作用。

请看附图：

这是我正在尝试的：

HTML：

<div class="box">
    <ul>
        <li>Hello</li>
         <li>World</li>
    </ul>    
</div>

CSS：

.box{
    border-bottom: 1px solid blue;
    overflow: hidden;   
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li{
    float: left;
    background: green;
    border: 1px solid red;
}

演示：http: //jsfiddle.net/b9H2j/

Answer 1

问题

您基本上希望li溢出.box其父级，但.box设置为overflow:hidden;.

解决方案

一个可能的解决方案是首先设置liwithposition:relative;然后让它溢出bottom:-1px;。然后overflow:hidden;从.box容器中移除并找到一种替代方法来克服明显的错误。

例如：

.box {
    display:table; /* overcome the clear bug */
    width:100%;
    border-bottom: 1px solid blue; 
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li {
    position:relative;
    bottom:-1px;
    float: left;
    background: green;
    border: 1px solid red;
}

参见jsFiddle 演示

Answer 2

您是否考虑过更改 HTML 结构？在我看来，用当前的 HTMl 做你想要实现的事情有点“不自然”。无论如何，这是另一个解决方案。不过，它需要您为列表项设置高度。

你可以这样做：

HTML

<div class="box">
<ul>
    <li class="left">Hello</li>
     <li class="left">World</li>
    <li class="add-bottom-border">something</li>
</ul>    
</div>

CSS

.box{
    display:table; /* overcome the clear bug */
    width:100%;

}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li{
    height:20px;
    background: green;
    border: 1px solid red;
}

.add-bottom-border {
    overflow:auto;
    border-bottom: 1px solid blue;    

}

.left {
    float:left;    
}

JSfiddle

有关于溢出背后原因的解释：auto; 在这里。