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

Question

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

现在，我正在使用这样的东西（参见jsfiddle）：http://jsfiddle.net/uaUtq/7/

这是为了快速审核：

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

感觉丑陋而复杂。你建议怎么做？

由于

Answer 1

使用无序列表来处理您正在做的事情并没有错。您可以考虑的其他选项只是使用表单，然后将标签输入配对包装在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>

Answer 2

不要弄乱太多标签。

只需使用<div>...</div>和将样式部分留给CSS

（无论如何，这是它的最初目的：将“内容”与“设计”分开） ......

Answer 3

我认为你应该使用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类写入正确的对齐方式，即边距，填充，浮动等。

Answer 4

你应该使用一张桌子。表是使列对齐的唯一方法，以便第一列仅占用所需的宽度（最长标签的宽度）。任何其他方法都会强制您对宽度进行猜测，结果将不可避免地发生变化，并且代码不会很稳健（只要最长标签的长度发生变化，就需要调整宽度）。

（这是一个重复的问题，你会在StackOverflow找到它的很多版本，答案各不相同。一旦你停止听取没有事实支持的意识形态论证，这个问题就很简单。）