HTML-我应该使用什么样的布局标签来进行布局

我正在做一个帐户页面的布局。我认为我的代码看起来很糟糕，因为我试图避免使用表。下面是我想要得到的屏幕截图：

现在，我正在使用类似的东西（参见JSFIDLE）：

下面是快速回顾：

<ul class="info_list">
    <li>
        <label>First name</label>
        <div><input type="text" /></div>
    </li>
    <li>
        <label>Email</label>
        <div>
            <p>john@gmail.com (Default)</p>
            <input type="text"/></div>
    </li>
    <li>
        <label></label>
        <div>
            <input type="checkbox" />Tickbox
        </div>
    </li>
</ul>​

名字


电子邮件
john@gmail.com（默认）



滴答声

​

这感觉既丑陋又复杂。你建议怎么做

---

谢谢

使用无序的列表来做你正在做的事情没有什么错。您可以考虑的其他选项包括使用表单，然后将标签输入对包装在div中以用于布局：

<form>
  <div>
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" />
  </div>
  <div>
    <label for="email">Email</label>
    <input type="text" id="email" />
  </div>
// etc.
</form>

名字
电子邮件
//等等。

使用无序列表进行操作没有错。您可以考虑的其他选项包括使用表单，然后将标签输入对包装在div中以用于布局：

<form>
  <div>
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" />
  </div>
  <div>
    <label for="email">Email</label>
    <input type="text" id="email" />
  </div>
// etc.
</form>

名字
电子邮件
//等等。

不要弄乱太多的标签

只需使用

…

和将样式部分留给CSS

---

（这就是它最初的目的：将“内容”和“设计”分开）…

不要弄乱太多的标签

只需使用

…

和将样式部分留给CSS

---

（这就是它最初的目的：将“内容”与“设计”分开）…

我认为你应该使用div而不是li 像这样

<div>
    <div class="label">First Name</div>
    <div class="element"><input type="text"/></div>
</div>
<div>
    <div class="label">Email</div>
    <div class="element"><input type="text"/></div>
</div>

名字
电子邮件

---

并为标签和控件编写CSS类，以正确对齐，即边距、填充、浮点等。

我认为应该使用div而不是li 像这样

<div>
    <div class="label">First Name</div>
    <div class="element"><input type="text"/></div>
</div>
<div>
    <div class="label">Email</div>
    <div class="element"><input type="text"/></div>
</div>

名字
电子邮件

---

并为标签和控件编写CSS类，以正确对齐，即边距、填充、浮动等。

您应该使用表格。表格是使列对齐的唯一方法，以便第一列正好占据所需的宽度（最长标签的宽度）。任何其他方法都会迫使您对宽度进行猜测，结果将不可避免地发生变化，代码也不会稳定（只要最长标签的长度发生变化，就需要调整宽度）

---

（这是一个重复的问题，你可以在StackOverflow找到许多不同的答案。一旦你停止听没有事实支持的意识形态观点，问题就很简单了。）

你应该使用表格。表格是使列对齐的唯一方法，以便第一列正好占据所需的宽度（最长标签的宽度）。任何其他方法都会迫使您对宽度进行猜测，结果将不可避免地发生变化，代码也不会稳定（只要最长标签的长度发生变化，就需要调整宽度）

---

---

（这是一个重复的问题，你可以在StackOverflow网站上找到许多版本的问题，答案各不相同。一旦你停止听没有事实支持的意识形态观点，问题就非常简单了。）

仅供参考，为什么要避免使用表？我想你应该先改变缩进标记的样式。@AmitBhargava-我一直在到处阅读，我应该避免使用表进行布局。我很乐意使用表格。@denislexic感谢您的澄清仅供参考，您为什么要避免使用表格？我认为您应该先改变缩进标记的样式。@AmitChargava-我一直在到处阅读，我应该避免将表格用于布局目的。我很乐意使用表格。@denislexic感谢澄清+1，因为它使用了与输入显式关联的标签。我建议使用

标签而不是

，因为它更具语义。无论如何，使用

会造成伤害！！如果您喜欢这个想法，请使用+1。标记不会添加任何语义值，因此在本例中，使用与输入显式关联的标签并不比使用div+1更合适。我建议使用

标记而不是

，因为它更具语义。无论如何，使用

会造成伤害！！如果您喜欢，请使用+1。标记不会添加任何语义值，因此在这种情况下它并不比div更合适。表不是唯一一种在不指定宽度的情况下对齐列的方法：除了kinakuta上面的JSFIDLE，您可以浮动包含div的数据，而不是使用display:inline block来完成相同的任务（并且与IE7兼容）。不需要在旧的布局技术之外有自己用途的表。kinakuta的代码在IE7甚至IE8上都不起作用。浮动会带来各种各样的问题和怪癖，使用浮动可以避免使用表格材料，比如表单字段数组及其图例。代码在IE8上运行良好。如果您必须支持IE7，使用浮动也没有什么错，如果您不了解如何解决IE7的许多问题，浮动可能会有问题。表单字段不是表格材料。表格不是在不指定宽度的情况下对齐列的唯一方法：除了kinakuta上面的JSFIDLE之外，还可以浮动包含div的字段，而不是使用display:inline块来完成相同的任务（并且与IE7兼容）在旧的布局技术之外，不需要有自己用途的表。kinakuta的代码在IE7甚至IE8上都不起作用。浮动会带来各种各样的问题和怪癖，使用浮动可以避免使用表格材料，比如表单字段数组及其图例。代码在IE8上运行良好。没有什么