html+css，在没有表格的ul旁边放一个按钮

Question

这是我想要实现的目标^

现在它是这样工作的:http://jsfiddle.net/yfxPm/1/

问题是如果我把 float:left 放在里面，剩下的内容就会进去

    <div class='field'>
    <ul class='display'>
    <li>apple</li>
    </ul>
    <button class='btn'>...</button>
    <div>
<button>this button will go inside .field div </button>

(清楚:两者都在 .field 上没有帮助)CSS:

.field
{ 
    width: 200px;
    margin: 1em;
}
.display
{
    list-style: none;
    padding: 0;
    margin: 0;
    border: solid 1px gray;
    background: white;
    float: left;    
}

一个解决方案是放置一个 <br style="clear:both" />在 .field div 结束之前，但这将添加一些额外的填充

Answer 1

这里是如何正确使用 clear:both

HTML:

    <div class="field">
       <ul class="display">
            <li>apple</li>
            <li>apple</li>
            <li>apple</li>
            <li>apple</li>
       </ul>
       <button class='btn'>...</button>
       <div class="clear"></div>
    </div>
<button>should be below</button>

CSS:

.field
{ 
    width: 200px;
    margin: 1em;
}
.display
{
    list-style: none;
    padding: 0;
    margin: 0;
    border: solid 1px gray;
    background: white;
    float: left;    
}
.clear {
    clear:both;
}

使用带有 clear 类的空 div，将清除 float 并且不添加任何填充。而且它会在不同的浏览器上呈现相同的方式