javascript - "li"行内元素的高度

Question

我正在尝试将具有“display:inline”的“li”的高度设置为 css。我知道内联元素会重置高度，但我需要它显示:内联只是为了让文本居中对齐列表。

这是我的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/