用不同的方式來構造html輸入和標籤的形式

Question

我在想什麼是用標籤和輸入結構html表單的最佳解決方案。

我曾經這樣做過，float: left爲標籤，float: right爲輸入。每條線都圍繞着一個塊clear: both。

但我不認爲這些CSS屬性是類似的東西做..

那麼什麼其他的解決方案？桌子？

Answer 1

表也是一個解決方案。

也，分區2周內的div（左和右）

或1的div與浮動兩個元件：留有餘量左。

Answer 2

那麼它真的取決於你想要的形式。例如，如果你想要一個帶有邊框的清晰網格，我建議使用一個表格。

要複製你有什麼，你可以這樣做：

<label for='textbox'>Label</label><input type='text' id='textbox' /> 

然後這個CSS：

label { display: inline-block; width: 100px; } 

這將使在同一行標籤留在輸入元素，但會推它適當的距離。

就個人而言，我儘量避免使用浮動來對齊元素。我寧願使用絕對位置，並設置左或右，頂部或底部。對我來說，漂浮就像是要求瀏覽器爲你做，也許一些瀏覽器（咳嗽即咳嗽）將決定稍微有點不同。

Answer 3

表單標記和CSS將永遠是個人選擇。當然，從CSS的角度來看，在語義上和技術上都存在一些權利和錯誤，但肯定沒有一種（或甚至少數）「正確」的技術。

我個人的偏好是將標籤左移，並在列表中包含我的輸入，我個人認爲它比div或p標籤更具語義。

HTML：

<form> 
    <fieldset> 
     <ol> 
      <li> 
       <label for="input1">Label 1</label> 
       <input type="text" name="input1" id="input1"> 
      </li> 
      <li> 
       <label for="input2">Label 2</label> 
       <input type="text" name="input2" id="input2"> 
      </li> 
      <li> 
       <label for="input3">Label 3</label> 
       <input type="text" name="input3" id="input3"> 
      </li> 
     </ol> 

     <button type="submit">Submit</button> 
    </fieldset> 
</form> 

CSS：

li { 
    clear: left; 
    margin-bottom: 10px;  
} 

label { 
    float: left; /* You could use "display: inline-block;" instead. */ 
    margin-right: 10px; 
    width: 80px; 
}