Question

我必须创建一个看起来像这样的

的webform

column   column  -   column   column      column column   -   column column
label:   input   -   label:   input 
label:   input   -   label:   input   -   label: input
label:   input   -   label:   input
label:   input
label:   input   -   label:   input
label:   input   -   label:   input   -   label: input   -    input: label

等。

现在最好的方法是做什么？我一直在努力用css来完成，但我一遍又一遍地失败了。

我应该继续使用表格，还是用css做一个简单的方法？

Answer 1

用表做吧。表格适用于表格数据，例如列和行的内容......就像你的情况一样！

Answer 2

您的示例格式没有采用吗？如果您只想要标签，输入控件和空格，只需将控件添加到页面中，不进行任何格式化。 HTML将以这种方式布局。

但是，我假设您需要某种列。你有几种可能性。最不灵活的是绝对定位控件（标记）。

你可以使用表格，这是最直接的。然而，纯粹主义者会争辩说表格用于数据，而不是布局。

你也可以浮动一系列DIV来表示列：标签一列，输入一列，标签三分之一，输入四分之一等。

编辑：如果您不担心标签垂直排列，标签和输入垂直排列输入，只需在每列中添加一个标签+输入对，无论您选择哪种方法。

Answer 3

这样的事情怎么样？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style type="text/css">
    .column {
      width: 200px;
      float: left;
    }

    .column label {
      clear: both;
      float: left;
      margin-right: 10px;
      margin-bottom: 5px;
      text-align: right;
      width: 75px;
    }

    .column input {
      float: left;
      width: 100px;
    }
  </style>
</head>

<body>
  <div class="column">
    <label>Label 1:</label> <input type="text" />
    <label>Label 2:</label> <input type="text" />
    <label>Label 3:</label> <input type="text" />
    <label>Label 4:</label> <input type="text" />
  </div>

  <div class="column">
    <label>Label 5:</label> <input type="text" />
    <label>Label 6:</label> <input type="text" />
    <label>Label 7:</label> <input type="text" />
    <label>Label 8:</label> <input type="text" />
  </div>
</body>
</html>

如果您喜欢，可以考虑使用字段集而不是列的div。它们风格很好，更具语义性。无论哪种方式都很好。

Webform布局：表格或其他内容

3 个答案: