CSS用空文本定位按鈕

Question

我有三個簡單的html按鈕，樣式爲height - min-width - 和border。一個帶有文字，另一個帶有非制動空間，最後是空文本。

我的諾貝爾問題是在瀏覽器視圖，最後一個空文本按鈕打印在不同的地方。

CSS：

.test { 
    height: 27px; 
    border: 1px solid #b4b1ff; 
    min-width: 54px; 
} 

HTML：

<button class="test">Text</button>  <!-- with text --> 
<button class="test">&nbsp;</button> <!-- with Non Breaking Space --> 
<button class="test"></button>   <!-- Empty ?? --> 

看到fiddle

Answer 1

按鈕元素，我相信inline默認情況下，所以你需要垂直對齊他們

JSFiddle Demo

CSS

body { margin: 0; padding: 0; } 
.test { 
    height: 27px; 
    border: 1px solid #b4b1ff; 
    vertical-align: top; 
}