“ li”內聯元素的高度

Question

我正在嘗試將“ display：inline”設置為css的“ li”的高度。 我知道內聯元素會重置高度，但我需要將其顯示：內聯只是為了使文本居中對齊列表。

這是我的CSS：

li{
    font-size: 28px;
    border-right: 1px solid #b9b9b9;
    margin-right: 15px;
    padding-right: 15px;
    line-height: 40px;
    display: inline;
    text-align: center;
    color: #ffffff;
}

我需要固定高度以根據文本高度顯示邊框高度，這就是現在發生的情況：

有什么解決方法嗎？ 記住，我需要內聯顯示以使文本在ul上方居中對齊。

如果還有其他方法可以使文本對齊：居中，則列表也將對我有所幫助...

Answer 1

inline不以這種方式尊重填充或邊距。 您應該使用display: inline-block來執行以下操作：

http://jsfiddle.net/hBz7G/1/

Answer 2

嘗試這個：

剛剛刪除了line-height屬性，該屬性使它從頂部開始具有空間，並且僅提供右側的邊距和右側的填充以僅從右側具有空間。

li{
  font-size: 28px;
  border-right: 1px solid #b9b9b9;
  margin: 0 15px 0 0;
  padding: 0 15px 0 0;
  display: inline;
  text-align: center;
  color: #ffffff;
}