“li”内联元素的高度

Question

我试图设置“li”的高度，其中“display：inline”为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/

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