html - 文本未对齐

Question

我创建了以下 HTML CSS Code :

<div class="Pager">
  <span class="Resume">Posts 1 to 40 of 220X</span>
  <ul class="Buttons">
    <li><span>123</span></li>
  </ul>
  <div class="Clear"></div>
</div>

.Class {clear: both;}

div.Pager {}

div.Pager span.Resume {
  font-family: Arial;
  font-size: 0.9em;
  line-height: 1;
  float: left;
}

div.Pager ul.Buttons {
  float: left;    
}

div.Pager ul.Buttons li {
  float: left;   
}

div.Pager ul.Buttons li span {
  font-family: Arial;
  font-size: 0.9em;
  line-height: 1;
}

有谁知道为什么“123”文本出现在前面的文本下方？

谢谢你，米格尔

Answer 1

将“字体样式设置 CSS”移动到最外层的元素 (div.Pager)，并且只在那个元素上使用它，这样您就不会不必要地重新定义相同的东西:

http://jsfiddle.net/thirtydot/85AKq/9/

这是可行的，因为 font-family、font-size、line-height 都是可继承的——后代可以从父元素。

---

我很确定这无关紧要，但是要在 jsFiddle 中关闭“规范化 CSS”时使其正常工作，请添加 margin: 0;填充:0； list-style: none 到你的 ul:

http://jsfiddle.net/thirtydot/85AKq/10/