详细信息视图和 CSS 合规性

Question

我仍然很难不想使用表格在 HTML 中进行详细信息视图布局。 我想让人们运行一些样本并获得一些意见。

您希望在详细信息视图的 html 中看到什么？ 哪一个跨浏览器的障碍最少？ 哪个最合规？ 如果我有一个右对齐的静态宽度标签列，哪一个看起来更好？

通过详细信息视图，我的意思是类似于下图的内容。

表

<table>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
</table>

字段集

<fieldset>
<label /><input type="textbox" /><br />
<label /><input type="textbox" /><br />
</fieldset>

Div

<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>


<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>

列表

<ul>
<li><label /><input type="textbox" /></li>
<li><label /><input type="textbox" /></li>
</ul>

Answer 1

这些方法并不是相互排斥的，我个人会将它们混合起来：

<fieldset>
  <label for="name">XXX <input type="text" id="name"/></label>
  <label for="email">XXX <input type="text" id="email"/></label>
</fieldset>

尽管为了获得正确对齐的标签（我个人会避免这样做，因为它更难视觉扫描），但您需要在标签周围有一个额外的元素文本不在输入周围，所以我会选择

<fieldset>
  <div class="label_input"><label for="name">XXX</label><input type="text" id="name"/></div>
  <div class="label_input"><label for="email">XXX</label><input type="text" id="email"/></div>
</fieldset>

Answer 2

实际上，我将其收回来仅用于简单的文本框输入，我发现 Fieldset 选项效果很好。

然而，通常我会在一个“行”中拥有多个控件，因此我使用基于 div 的布局，这样我就可以将输入、验证器和所有内容放入单个元素中。

Answer 3

我更喜欢包含 div 的字段集。 标签div是float:left; width:20em 和内容 div 只有固定的左边距，例如 21em 或 22em。 但你必须记住要包含一个明确的 div 才能发挥作用：

<fieldset>
   <div class="labels"><label for="name">Name</label></div>
   <div class="data"><input ....</div>
   <div style="clear:both"/>
// repeat for next fields
</fieldset>

Answer 4

CSS：

label{
  float:left;
  text-align:right;
  width:115px;
  margin-right:5px;
}
input{
  margin-bottom:5px;
}

HTML：

<label for="username">UserName:</label><input type="text" id="username" /><br />
<label for="username">UserName:</label><input type="text" id="username" /><br />

显然，您可以添加一个 div 或使用它周围的表单来获取整个表单的背景颜色等。

Answer 5

我发现表单是 css 中最难处理的事情之一，因为如果您想要严格控制，通常需要添加大量 css，而老式 HTML 会为您处理。 但是，如果您愿意接受统一的自然处理方式，那么分离内容和呈现的最干净的方法是：

form { margin: 0; padding: 0; }
fieldset { whatever treatment you want }
#details div { margin: 5px 0; width: 100%; overflow: hidden; /* ensures that your floats are cleared */ }
#details label { float: left; width: 190px; text-align: right; }
#details input { margin-left: 200px; }

<form>
  <fieldset id="details">
    <div id="item1div">
      <label for="item1">item1 label</label>
      <input type="" id="item1" />
    </div>
    <div id="item1div">
      <label for="item1">item1 label</label>
      <input type="" id="item1" />
    </div>
  </fieldset>
</form>

Answer 6

您可以使用表格表格来格式化表单，但可以使用CSS向表单添加样式。 CSS 纯粹主义者可能会说你不应该这样做，但现实是许多浏览器通常以不同的方式呈现 CSS 表单，并且可能会导致可访问性问题。 基于表格的表单在浏览器之间更加一致，也更易于访问。