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

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;。

<强>解决方案

可能的解决方案是首先使用li设置position: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 demo

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; here。