Float left導致我的輸入標籤位於頂部而不是v-align中間

我確定有很多人遇到這個問題，但我找不到合適的解決方案。這基本上是問題所在。我有一個有兩對標籤和字段的表單。Float left導致我的輸入標籤位於頂部而不是v-align中間

HTML：

<label for="Account">Inlognaam:</label> 
<input class="field" id="Account" name="Account" type=" 
<br /> 
<label for="Wachtwoord">Wachtwoord:</label> 
<input class="field" id="Wachtwoord" name="Wachtwoord" type="password" />

CSS：

label { 
    width: 150px; 
    float: left; 
    text-align: left; 
}

所以問題是：當我不使用 '浮動：左;'輸入字段不會很好的結構化。但標籤正在頂部對齊。這怎麼解決？

一個例子可見這裏：http://jsfiddle.net/ptKEh/9/（評論浮動：左;要明白我的意思）

編輯::

另一件事...輸入字段在Chrome正確的，但在IE9（ 9.0.8）第二場比較短一些。的

Not equal size fields http://oi42.tinypic.com/35mehe1.jpg

來源

2012-04-02 Highmastdon

，而不是浮動標籤只使用display: inline-block;
它將保留垂直對齊方式和它的作品甚至在IE6和7

來源

2012-04-02 13:07:18 fcalderan

與IE6 + 7不會工作？糾正我，如果我錯了 – Undefined 2012-04-02 13:08:19

請參閱http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ – fcalderan 2012-04-02 13:09:41

有趣的閱讀，我將不得不在我的下一個項目中看看:) – Undefined 2012-04-02 13:12:27

我會建議使用填充到文本向下移動到內聯。這僅適用於標籤的1行文本，並且具有跨瀏覽器的功能。

我已經把的jsfiddle爲例http://jsfiddle.net/ptKEh/11/

來源

2012-04-02 13:10:42 Undefined

Float left導致我的輸入標籤位於頂部而不是v-align中間

回答

相關問題