1

我想为一个网页制作一个 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 来做这件事，但这似乎有点多余，或者编码真的很糟糕。我试图用 a 来做到这一点，<span style="width:300px;">但跨度不会是 300 像素，也不会包括输入字段。

我目前的形式：

  <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>

所以简而言之，问题是：

有没有更有效的方法将标签与输入字段组合在一起，使它们变得像块一样？

PS 我使用 XHTML 1.0 过渡

4

3 回答 3

4

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

作为记录， aspan是一个内联元素，因此您不能在其上定义宽度。将其声明为display: inline-block;，您会注意到 width 属性现在得到尊重。

于 2013-06-13T14:05:43.117 回答
0

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

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

但是，您会在 bootstrap 上找到更多更好的示例。

于 2013-06-13T14:09:25.803 回答
0

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

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

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

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

我同意，如果您想在创建在移动设备和桌面设备上看起来都很棒的网页时让事情变得更轻松，那么您应该看看响应式框架。Twitter bootstrap 是一个： http: //twitter.github.io/bootstrap/ Foundation 是另一个： http: //foundation.zurb.com/

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

于 2013-06-13T14:07:26.810 回答