對齊HTML輸入

Question

我試圖在一個表單中對齊多個輸入和選擇框。我嘗試了各種CSS樣式來嘗試對齊它們，但一切似乎都失敗了（??）。

我的html可以在這裏找到。

http://jsfiddle.net/felix001/kA8cd/3/

有誰知道對準這些元素的任何簡單的方法。

感謝，

Answer 1

有誰知道任何簡單的方法，用於校準這些元素。

是的，你可以使用Twitter的引導：http://twitter.github.com/bootstrap/

它提供了常見的HTML元素（包括表單）太棒了，寫得很好樣式。用它們作爲起點並從那裏展開。

Answer 2

他們曾經說過不使用表格來佈置非表格數據，但在這種情況下，如果你想要一個快速而又髒的解決方案，它會工作。 （不是說我在使用表格進行佈局;只是把它放在那裏，它是一個選項應該都失敗了。）

Answer 3

如果你只想對齊它們左邊的標籤，輸入右邊，你可以試試這個：

label { clear：both; float：left; min-height：35px; } 輸入，選擇{float}：right; }

這不是最好的解決方案，但如果你正在尋找簡單，快速和簡單的東西，它應該工作。您可能想要將所有內容都包裝在div中，並在該包裝上設置一個寬度，以便字段和標籤也將更接近。

Answer 4

我喜歡用列表排列我的表單。我不能說這種方法是否有廣泛的採用，但它爲我提供了很好的服務。我打得四處您fiddle給你我是如何佈局以列表形式的例子，但我沒有完全風格你的例子給你:)

另一個列表例如http://woork.blogspot.com/2008/06/form-elements-design-using-css-and-list.html

列表允許我去上班與不錯的塊。就像@Roddy說的那樣，表格可以工作，但是更好的選擇可能是將表格佈局爲像display: table-cell這樣的屬性表格。

您也可以使用花車像這傢伙http://www.dailycoding.com/Posts/layout_form_without_tables_with_css_trick.aspx

我認爲所有這些方法都工作得體面。如果您需要更具體的答案，請提供詳細信息，說明您希望如何調整表格。