Question

我在div里面创建了li。但是，li显示在div之外。

<div class="container" style="width:100%">
   <div style="width:50%;border:1px solid red;">
    <ul>
        <li>Hello</li>
        <li>Hi</li>
        <li>There</li>
        <li>Where</li>
    </ul>
    </div>
</div>

js fiddle：http://jsfiddle.net/zfvck809/

任何帮助都将不胜感激。

Answer 1

您没有清除浮动，这意味着div高度不受li标记的影响。有许多方法可以清除浮动，但是当你需要清除容器上的浮动时，这种方法很有效：

div {
    overflow: auto;
}

Answer 2

你必须清除浮动：左指令：

<div class="col-md-8">
  <%= f.select :match, options_for_select([['On', true], ['Off', false]]), class: 'form-control input-md' %>
</div>

Answer 3

您只需清除列表项中的浮点数。

请尝试以下操作。

<div class="container" style="width:100%">
    <div style="width:50%;border:1px solid red;">
        <ul>
            <li>Hello</li>
            <li>Hi</li>
            <li>There</li>
            <li>Where</li>
        </ul>
    </div>
</div>

{{1}}

ul li走出div

3 个答案: