正确的方式在表格之间休息

Question

以上是表格。上面有以下表格有不同的方法，输入和文本分隔在不同的行上。

一种是使用< br / >，另一种是使用fieldset，p-tag等

但是我想知道在不同的行中分离不同形式的正确方法是什么？

Answer 1

最简单的方法就是：

label, input {
    display: block;
}

---

已编辑，将以下评论的内容从我自己添加到OP，因为它似乎与答案相关：

  

“最佳”是一种非常主观的衡量标准。 “最佳”只是实现最终结果的最简单方法，理想情况下不会破坏HTML的语义。在表单中使用div元素对包含的元素或它们之间的关系没有任何意义。

     

使用fieldset可以了解这种关系，但通常（可能应该，但我不确定）用于将元素组合在一起，而不是简单地对它们进行样式化。我认为我的方法是“最好的”，因为它依赖于没有额外的（有意义的或无意义的）HTML元素被添加到页面中。

Answer 2

没有快速规则。 HTML5似乎更喜欢使用p元素，请参阅其中的example。根据旧的HTML规范，p表示段落，但HTML5将paragrapg定义为几乎任何内联内容块。

实际上，最好根据所需的默认渲染选择标记。如果您不喜欢垂直间距，请使用br或div（在后者中，您可以将每一行包裹在div元素中，以便在需要时更轻松地设置样式）。如果您更喜欢间距（空行），请使用p。使用表格是一种可能性，但在这种简单的情况下不必要地复杂化。

Answer 3

建议不要使用<br/>标签来控制布局。此标记仅用于打破段落中的一行。将它用于布局目的是懒惰和不好的做法。

如上所述创建表单的最佳方法是使用<ul>列表。

<form>
  <ul>
    <li>
      <label for="firstname">Name</label>
      <input name="firstname" type="text" />
    </li>
    <li>
      <label for="surname">Surname</label>
      <input name="surname" type="text" />
    </li>
  </ul>
</form>

许多人认为这是“正确”的做法。

然后你可以按自己喜欢的方式设置列表样式，因此根据css标签可以在输入字段的上方或旁边（这是<br/>标记会破坏它的地方）。

您需要应用的基本风格是：

form ul {
  list-style-type:none;
}

这摆脱了列表中的要点。然后你可以，例如将元素设置为block或使它们浮动。

Answer 4

我会使用<div>标记并使用CSS手动定位它们。您还可以在CSS中使用clear:both。我之前也使用过<br />。您不希望使用<p>代码，因为它会混淆Google Bot抓取您的网站以将您置于Google搜索上，从SEO的角度来看<p>是不好的，除非您确实有内容在标签内。

表也可能看起来不错，但这里有一篇很好的文章说明为什么你不应该使用表格进行布局http://phrogz.net/css/WhyTablesAreBadForLayout.html

Answer 5

使用br并不是没有问题，尽管最干净的方法是只显示这些项目：阻止。

http://jsfiddle.net/chad/MdbKE/

Answer 6

标记标签/字段对的相当语义方式是使用DL列表（例如，Zend_Form中默认使用它）。对于提交按钮，可以使用DIV：

<dl>
    <dt><label for="frm-login-username">Username</label></dt>
    <dd><input type="text" name="username" id="frm-login-username" /></dd>

    <dt><label for="frm-login-password">Username</label></dt>
    <dd><input type="password" name="password" id="frm-login-password" /></dd>
</dl>

<div><input type="submit" value="Login" /></div>