文本未对齐

Question

我创建了以下 HTML CSS 代码：

<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；列表样式：无到您的ul：

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

Answer 2

将两个跨度上的 line-height 更改为正常对我有用

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

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

以及更改 li 和 ul 以删除点和间距完全修复了它。

div.Pager ul.Buttons li {
    float: left;
    list-style:none;
    padding:0;
    margin:0;
}

div.Pager ul.Buttons {
    float: left;
    list-style:none;
    padding:0;
    margin:0;
}

Answer 3

这是因为文本位于无序列表内。列表具有由浏览器确定的自动边距属性。为了让它达到相同的水平，您必须通过为列表提供 margin-top: -3px 样式来将其位置偏移到顶部，如下所示：

http://jsfiddle.net/hnYUR/