html - CSS 问题。某些文本似乎没有与其他文本相同的填充

Question

这是一个 CodePen 示例：http ://cdpn.io/wlEpA

如您所见，所有文本的行高都是不同的，即使每个元素都有相同的 CSS。

这是字体的问题吗？

文本应该都在同一行。

编辑：2个人说这个帖子不清楚或有用，至少解释一下为什么我可以更清楚，你对我帖子的投票也不清楚或有用。

score 3 · Accepted Answer

问题是元素的padding: 50% 0;样式。是一个相对值。这些元素当前的宽度会有所不同，具体取决于其内容的大小，这会影响填充的计算方式。.ml50%

为元素指定一个width或，它们将正确排列。这是您的 CodePen 示例，并添加了：http ://codepen.io/anon/pen/mbsnHmin-width.mlmin-width: 100px;

score 1 · Accepted Answer

一种解决方案是在 .mi css 类上设置行高。

.mi { 
    float:left;
    cursor:pointer;
    border-top:#222222 4px solid;
    margin:0em 1em;
    height:90%;
    line-height:85px;
}

即使其与 .menu 类的高度相同。

（如果我正确理解了这个问题）。

score 1 · Accepted Answer

Martyn，你的链接上有 display:inline-block，你的 div 上有 float:left。那是多余的。并且 inline-block 会产生边距不一致。关闭内联块，这将解决您的问题。

3 回答 3