4

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

6 回答 6

3

这些方法并不相互排斥，我个人会将它们混合一下：

<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>
于 2008-12-23T20:11:50.153 回答
0

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

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

于 2008-12-23T19:41:55.487 回答
0

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 或使用它周围的表单来获取整个表单的背景颜色等。

于 2008-12-23T21:06:26.957 回答
0

我更喜欢包含 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>
于 2008-12-23T21:07:37.687 回答
0

我发现表单是 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>
于 2008-12-23T21:41:10.130 回答
-1

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

于 2008-12-24T01:08:41.600 回答