Html 详细信息视图和CSS遵从性

我仍然很难不想使用表格在HTML中进行详细视图布局。我想让人们做一些样品，听听他们的意见

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

我所说的细节视图与下图类似。

桌子

字段集

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

Divs

名单

事实上，对于简单的文本框输入，我认为Fieldset选项工作得很好

---

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

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

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

XXX
XXX

虽然要获得正确对齐的标签（我个人会避免这一点，因为它更难进行视觉扫描），但您需要在文本周围添加一个与输入无关的额外元素，因此我选择

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

XXX
XXX

CSS：

HTML:

用户名：

用户名：

---

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

我更喜欢包含div的字段集。标签div为float:left；宽度：20em，例如，content 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>

名称
我发现表单是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>

form{margin:0；padding:0；}
字段集{您想要的任何治疗}
#details div{margin:5px 0；width:100%；overflow:hidden；/*确保清除浮点数*/}
#详细信息标签{浮点：左；宽度：190px；文本对齐：右；}
#详细信息输入{左边距：200px；}
项目1标签
项目1标签
您可以使用表格以表格形式格式化表单，但可以使用CSS向表单添加样式。CSS纯粹主义者可能会说，你不应该这样做，但事实是，许多浏览器经常以不同的方式呈现CSS表单，并可能导致可访问性问题。基于表的表单在浏览器之间更加一致，也更加容易访问
 你所说的“细节视图”是什么意思？这应该是什么样子？我有一个简单的CRUD应用程序，它只需要有一堆带有标签的文本框来填充数据。标签和输入元素可以独立存在。除此之外，对clear div加上一个大的no。是的，直到你需要在同一行上放置7个元素，两个在左边，五个在右边。然后你会希望你有div，这样所有的东西都排列得很好。表单不是表格数据。使用语义标记，CSS不会导致可访问性问题（即使存在显示异常）
<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>

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

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

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

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>