如何正確設計表單的樣式？

我真的不擅長CSS，我想知道如何正確地設計窗體的樣式，以便將每個單獨的文本輸入和標籤放在一行中。像這樣：如何正確設計表單的樣式？

<label for="input1">...</label> 
<input type="text" id="input1"/> 
<label for="input2">...</label> 
<input type="text" id="input2"/> 
<label for="input3">...</label> 
<input type="text" id="input3"/> 
<label for="input3">...</label> 
<input type="text" id="input3"/>

，它會像網頁顯示：

(label)(input) 
(label)(input) 
(label)(input) 
(label)(input)

來源

2012-08-13 Rafael Adel

我建議this tutorial by A List Apart約更漂亮殘疾人專用表格。你也可以使用一個定義列表有一些自定義的樣式，例如，

<dl><dt><label></label></dt> 
    <dd><input></dd></dl>

而且是這樣的：

dl dt { 
    float: left; 
    width: 8em; 
}

編輯：來總結列表除了文章，他們建議你把表格有序列表中的字段ol。標籤顯示爲inline-block，因此它們在相關字段旁邊水平顯示。

來源

2012-08-13 19:26:43

我不明白。將表單元素放在定義列表中是非語義的。 – 2012-08-13 19:42:57

由於提供的鏈接，我將其標記爲答案，這對我有很大的幫助。謝謝。 – 2012-08-13 22:14:47

把它們放在一個列表，或在結構像一個列表（也就是說，包裝每個「行「在一個div中）。

來源

2012-08-13 19:12:06 Marcin

這應該是一個評論。 – 2012-08-13 19:47:17

@AnubhavSaini如何？這是一個完整的解決方案。 – Marcin 2012-08-13 19:48:14

<label>foo</label> 
<input type="text"/> 
<label>foo</label> 
<input type="text"/> 

<style> 
input, label { float:left } 
label { clear:left; } 
</style>

http://jsfiddle.net/RpRS5/

來源

2012-08-13 19:12:27 xandercoded

我相信這是得到這個的最好方法。 +1 – maksbd19 2012-08-15 19:56:42

把你輸入的標籤元素內，那麼你可以簡單display: block他們或浮動他們，我寧願顯示，但它會很容易改變。

http://jsfiddle.net/Bpxfp/

來源

2012-08-13 19:15:16 TheZ

但這不是一個壞習慣嗎？ – 2012-08-13 19:17:20

@Rafael「this」？你指的是什麼？ – TheZ 2012-08-13 19:18:12

將輸入放入標籤標籤中。 – 2012-08-13 19:18:36

http://jsfiddle.net/ud7YE/1/

可以通過改變包裝物的寬度控制所述標籤和輸入之間的空間。只需將標籤的高度和輸入的上邊距設置爲相同但爲負數

來源

2012-08-13 19:29:01 maksbd19

一個很好的解決方法。但浮動和「邊緣化」對代碼可維護性來說是不利的 – 2012-08-13 19:46:29

我發現將標籤和輸入或選擇標籤封閉在div或列表中。和標籤，選擇標籤應該是類型inline-block

<div> 
    <label>Name: </label><input type="text" /> 
</div> 

<div> 
    <label>Place: </label><input type="text" /> 
</div>

CSS：

label { 
    display: inline-block; 
} 
input { 
    display: inline-block; 
    padding: 2px; 
} 
div { 
    display: block; 
    margin: 2px 0; 
}

這將工作搞好。

來源

2012-08-13 20:11:08 Vicky

如何正確設計表單的樣式？

回答

相關問題