Clearfix推送内容

Question

我有一个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>

Answer 1

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

在clearfix中确实不需要{p> display: table。事实上，它实际上并没有使clearfix工作。 It's there for a different reason.您可以将其替换为display: block代替它，并且它可以正常工作。

但你真的不需要一个明确的修补程序。您可以通过对每个（连续的）li应用间隙来清除浮动。我可以想象你唯一真正需要一个clearfix的地方是.true-false或.true-false ol，但这取决于你的布局。我确定的是，你绝对不需要li元素。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;