javascript - “li”行内元素的高度

Question

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

这是我的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 上居中对齐。

如果有其他方式 text-align:center 列表也将帮助我认为......

Answer 1

inline这种方式不尊重填充或边距。你应该使用display: inline-blockwhich ：

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