Clearfix将内容推倒

Question

我已经得到了一个有序列表，并且li项中的元素是浮动的，所以我将清除代码应用于li，但出于某种原因，li项上的内容正在向下推。

JS Fiddle这里：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元素中文本的基线，从而导致文本被向下推倒。

在一个清晰的补丁中，并不真正需要display: table。事实上，它实际上无助于使清理工作正常进行。It's there for a different reason. --你可以用display: block代替它，它会工作的。

但你真的不需要一个明确的解决办法。通过对每个(连续) li应用清除权限，您可以正常清除浮标。我能想象您真正需要清除的唯一地方是.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>

​