css - ul li 走出 div

Question

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

.container>div {
  width: 50%;
  border: 1px solid red;
}

div ul {
  list-style-type: none;
}

ul li {
  font-weight: 700;
  float: left;
  width: 48%;
}

<div class="container">
  <div>
    <ul>
      <li>Hello</li>
      <li>Hi</li>
      <li>There</li>
      <li>Where</li>
    </ul>
  </div>
</div>

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

如有任何帮助，我们将不胜感激。

Answer 1

您没有清除 float ，这意味着 <ul>的高度不受 li 的影响标签。清除 float 的方法有很多种，但当您需要清除容器上的 float 时，这种方法很有效:

ul {
    overflow: auto;
}

示例:

.container>div {
  width: 50%;
  border: 1px solid red;
}

div ul {
  list-style-type: none;
  overflow: auto;
}

ul li {
  font-weight: 700;
  float: left;
  width: 48%;
}

<div class="container">
  <div>
    <ul>
      <li>Hello</li>
      <li>Hi</li>
      <li>There</li>
      <li>Where</li>
    </ul>
  </div>
</div>