html – 详细信息视图和CSS合规性

2024年1月30日 175次阅读

我仍然很难不想使用Tables在
HTML中执行我的详细信息视图布局.我想通过人们运行一些样本并得到一些意见.

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

按详细信息视图,我的意思类似于下图.
《html – 详细信息视图和CSS合规性》

表

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

最佳答案 这些方法并不是相互排斥的,我个人将它们混合起来：

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