Html 文本未对齐

我创建了以下内容：

220X中的1至40号杆

123

.Class{clear:两者；}
分区寻呼机{}
部门传呼机跨度恢复{
字体系列：Arial；
字号：0.9em；
线高：1；
浮动：左；
}
分区寻呼机ul按钮{
浮动：左；
}
分区寻呼机ul按钮li{
浮动：左；
}
分区寻呼机ul按钮li span{
字体系列：Arial；
字号：0.9em；
线高：1；
}

有人知道为什么“123”文本比前一个文本低吗

谢谢,，

---

米格尔

将两个跨度上的

线高度

更改为正常值对我来说很有效

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

---

这是因为文本位于无序列表中。列表具有由浏览器确定的自动边距特性。为了让它上升到相同的水平，你必须通过给列表一个

边距顶部：-3px

样式，将它的位置偏移到顶部，如下所示：

将“字体样式设置CSS”移动到最外面的元素（

div.Pager

），并将其仅放在该元素上，这样您就不会不必要地重新定义相同的内容：

这是因为

字体系列

，

字体大小

，

行高

都是可继承的-子体可以从父元素继承这些属性

---

我很确定这是不相关的，但为了在JSFIDLE中关闭“规范化CSS”时使其工作，请添加

margin:0；填充：0；列表样式：无

到您的

ul

：

---

去掉jQuery的规范化（左边的复选框），它会更加明显。使用Chrome控制台或Firebug检查元素。@BradChristie-我更新了问题中的小提琴。这是为什么？我正在检查元素，我可以看到它有填充物（或者看起来是这样）。即使将padding和margin设置为0，它肯定仍然有一点偏移。

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