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; padding: 0; list-style: none添加到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/

文字未对齐

3 个答案: