爲什麼我的文本框不同高度（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;而不是顯示：塊直列

一個例子：http://jsfiddle.net/c9br2/1/