Question

我想为一个网页制作一个HTML表单，这个网页可以从全高清到智能手机进行重新调整。我希望标签到输入的距离是相同的距离，这样如果表格放在div中，例如600px，标签和输入字段作为行总计300px（包括填充，边距等））字段按2列排序。如果div比重新大小后变为900px，则表格将分布在3列。

然后应按以下方式订购字段：

有2列：

F1  F4
F2  F5
F3  F6

有3列：

F1  F3  F5
F2  F4  F6

现在因为我对HTML和CSS比较陌生，所以我个人会用很多div来做这个，但这看起来有点多余或者编码非常糟糕。我尝试使用<span style="width:300px;">执行此操作但跨度不会是300 px，也不会包含输入字段。

我目前的表格：

  <div class='main_text' style='width:55%;padding-left:10%;padding-right:10%;'>
     <label>Name:</label>
     <input id="name" type="text" value='Name'/><br />
     Age:
     <input id="age" type="text" value='21'/><br />
     Insterests:
     <input id="interests" type="text" value='Socer'/><br />
     Targets:
     <input id="targets" type="text" value='stop smoking for at least 2 years'/><br/>
     Other:
     <input id="other" type="text" value='I have 3 cats'/><br />
 </div>

简而言之，问题是：

是否有更有效的方法将标签与输入字段分组，以便它们变成块状？

P.S。我正在使用XHTML 1.0 transitional

Answer 1

我建议您查看现有的Bootstrap或Foundation框架，它们将为您提供开始编写自适应设计的良好基础。

对于记录，span是内联元素，因此您无法在其上定义宽度。将其声明为display: inline-block;，您会注意到宽度属性现在已得到尊重。

Answer 2

首先：使用<label>的“for” - 属性将标签链接到输入字段：

<label for="name">Name:</label>
         <input id="name" type="text" value='Name'/><br />

然后，不，如果你想“将它们组合在一起”，例如在带边框的框中，最好是使用div。这是我的意见。

编辑：在回答之前，我不太擅长阅读整个问题。

我同意你应该看看一个响应式框架，如果你想在创建在移动和桌面上看起来很棒的网页时让你更容易。 Twitter引导程序是一个：http://twitter.github.io/bootstrap/ 基金会是另一个：http://foundation.zurb.com/

找一个你喜欢的并尝试一下。就个人而言，我最喜欢Bootstrap。

Answer 3

通常会看到标签包含的单选按钮和复选框元素元组，如下所示：

<label> <input /> text </label>

但是你会在bootstrap上找到更多更好的例子。

是否有更有效的方法将标签与输入字段分组，以便它们变成块状？

3 个答案: