用不同的方式来构造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; 
}