为什么我的文本框有不同的高度（CSS）？

Question

我的CSS代码：

#nav { width:400px; text-align:center; }
#nav span { 
    display:block-inline;
    margin:0 2px;
    padding:2px 12px;
    height:21px;
    border:1px solid #999;
    border-radius:2px; 
    -moz-border-radius:2px; 
    -webkit-border-radius:2px; 
    text-align:center;
}

和HTML：

  <p id="nav">
    <span style="float:left;">previous</span>
    <span>back</span>
    <span>random</span>
    <span style="float:right;">next</span>
  </p>

这应该给我4个相同高度的文本框，但我得到的是：

它们是正确的顶部对齐，但“前一个”和“下一个”框高于CSS中定义的框。知道为什么会这样吗？ （我没有特定于浮动的CSS。）

Answer 1

您应该应用display: inline-block;而不是display：block-inline

示例：http://jsfiddle.net/c9br2/1/