CSS問題。有些文字似乎並不具有相同的填充其餘

正如你可以看到，所有的文本行的高度是不同的，儘管每個元素都有相同的CSS。

這是字體問題嗎？

該文本應該都在同一行上。

編輯：2人中有人表示此帖不明確或者不實用，至少可以解釋一下爲什麼這樣我可以更加清楚，你對我的帖子的投票也不明確或者有用。

問題是.ml元素上的padding: 50% 0;樣式。 50%是一個相對值。這些元素當前的寬度有所不同，具體取決於其內容的大小，並且會影響填充的計算方式。

爲.ml元素指定width或min-width，它們將正確排列。這裏是您的CodePen示例，並添加了min-width: 100px;：http://codepen.io/anon/pen/mbsnH

2013-11-04 00:30:32

怎麼樣？我使用它來垂直居中文本 –

如果您將其設置爲特定的像素高度，則它們距離頂部會有一個均勻的距離。我實際上弄不清楚爲什麼容器是不同的高度，但他們是。 – Cole

「菜單」div將使用JavaScript更改高度，我想使用百分比，以便填充將隨「菜單」高度一起流動。否則，我將不得不使用JavaScript來更改填充。 –

一個解決方案是設置.mi css類的行高。

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

即，使其成爲相同的高度。菜單類。

（如果我正確地理解了這個問題）。

2013-11-04 00:42:10

Martyn，你有顯示：內聯塊在你的鏈接，你有浮動：留在你的div。這是多餘的。內聯塊會產生保證金不一致。關掉內聯塊，這將解決您的問題。

2013-11-04 00:51:07 whalesharkie

回答