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

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;让它溢出.然后从 .box 容器中删除 overflow:hidden; 并找到一种替代方法来克服明显的错误。

例如:

.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