详细信息视图和CSS合规性

Question

我仍然很难不想使用Tables在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

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 4

我更喜欢包含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 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表单并且可能导致可访问性问题。基于表格的表单在浏览器中更加一致，并且更易于访问。