html - 详细信息 View 和 CSS 合规性

Question

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

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

“详细信息” View 是指类似于下图的内容。

表格

<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 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>