html - Clearfix将内容下推

我有一个Ordered列表，并且li项目中的元素是浮动的，因此我将clearfix代码应用于li，但是由于某些原因，li项目中的内容被下推。

JS小提琴在这里：http://jsfiddle.net/48psdoeu/2/

.true-false ol {} .true-false ol > li:before,
.true-false ol > li:after {
  content: " ";
  display: table;
}
.true-false ol > li:after {
  clear: both;
}
.true-false ol .question {
  width: 70%;
  padding-top: 0;
  float: left;
}
.true-false ol .answer {
  width: 10%;
  float: left;
}
p {
  padding: 0;
  margin: 0;
}

<div class="true-false">
  <ol type="i">
    <li>
      <div class="question">
        <p>Always add water to chemicals as fast as possible.</p>
      </div>
      <div class="answer">test</div>
    </li>
    <li>
      <div class="question">
        <p>Always keep chemicals in their original container.</p>
      </div>
      <div class="answer">test</div>
    </li>

  </ol>
</div>

最佳答案

display: table声明使每个li元素中的文本基线混乱，导致文本被下推。

clearfix中实际上并不需要display: table。实际上，它实际上根本没有使clearfix工作。 It's there for a different reason.您可以将其替换为display: block，它将起作用。

但是，您实际上根本不需要在这里使用clearfix。您可以通过对每个（连续）li应用间隙来正常清除浮子。我可以想象的是，您真正需要clearfix的唯一地方是在.true-false或.true-false ol上，但这取决于您的布局。但是我可以确定的是，您绝对不需要li元素。

.true-false ol > li {
  clear: both;
}
.true-false ol .question {
  width: 70%;
  padding-top: 0;
  float: left;
}
.true-false ol .answer {
  width: 10%;
  float: left;
}
p {
  padding: 0;
  margin: 0;
}

<div class="true-false">
  <ol type="i">
    <li>
      <div class="question">
        <p>Always add water to chemicals as fast as possible.</p>
      </div>
      <div class="answer">test</div>
    </li>
    <li>
      <div class="question">
        <p>Always keep chemicals in their original container.</p>
      </div>
      <div class="answer">test</div>
    </li>

  </ol>
</div>

关于html - Clearfix将内容下推，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28591047/