html+；css，在ul旁边放置一个按钮，不带表格

这就是我想要实现的目标^

下面是它现在的工作原理：

问题是，如果我把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 div的末尾加上一个

，但这会增加一些额外的填充

<div class='field' style="float:left">
    <ul class='display'>
        <li>apple</li>
    </ul>
</div>
<div style="float:left">
    <button class='btn'>...</button>
<div>

苹果

...

---

应能正常工作以下是如何正确使用clear:两者

HTML:

---

使用带有clear类的空div将清除浮点，而不添加任何填充。此外，它将在不同的浏览器上以相同的方式呈现溢出：隐藏在这里可能更合适

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

看，妈妈，没有彩车

HTML

    <div>
    <ul>
        <li>Apple</li>
        <li>Papaya</li>
    </ul>
    <button type="submit">&hellip;</button>    
</div>
<button>should be below</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

---

您确定应该在此处使用

ul

元素吗？看起来你需要一个

选择

。你能显示它当前正在做什么吗，比如它看起来是什么吗？@bash当然，这里是@omu，为了正确使用clear属性，请参见下面的答案。对不起，我错过了你问题中的第二个按钮。我归咎于缺少咖啡

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

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

.field {
    margin: 1em;
    overflow: hidden; /*Clear the floated children */
}
.display
{
    list-style: none;
    padding: 0;
    margin: 0;
    border: solid 1px gray;
    background: white;
    overflow: hidden; /*Leave a gap on the right for the button*/    
}
.btn {
    float: right;
}

    <div>
    <ul>
        <li>Apple</li>
        <li>Papaya</li>
    </ul>
    <button type="submit">&hellip;</button>    
</div>
<button>should be below</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

div { display:block; }
ul { display:inline-block; }
button { display:inline-block; vertical-align:top; }