0

我必须创建一个看起来像这样的网络表单

列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列列
标签：输入 - 标签：输入
标签：输入 - 标签：输入 - 标签：输入
标签：输入 - 标签：输入
标签：输入
标签：输入 - 标签：输入
标签：输入 - 标签：输入 - 标签：输入 - 输入：标签

ETC..

现在做这件事的最好方法是什么？我一直在尝试使用 css 完成的方法，但我一次又一次地失败了。

我应该继续使用表格，还是有一种简单的方法可以用css做到这一点？

4

3 回答 3

4

只需使用表格即可。表格适用于表格数据，例如具有列和行的内容……就像您的情况一样！

于 2009-02-21T02:30:20.453 回答
1

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

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

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

您还可以使用浮动一系列 DIV 来表示列：一列表示标签，一列表示输入，第三列表示标签，第四列表示输入，等等。

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

于 2009-02-21T02:23:56.817 回答
1

这样的事情怎么样？

<!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。他们的风格很好，更语义化。无论哪种方式都很好。

于 2009-02-25T05:38:28.080 回答