1

我正在为帐户页面进行布局。而且我认为我的代码看起来很糟糕，因为我试图避免使用表格。这是我想要得到的屏幕截图： 在此处输入图像描述

现在，我正在使用这样的东西（见 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>​

感觉又丑又复杂。你会建议怎么做？

谢谢

4

4 回答 4

3

对你正在做的事情使用无序列表并没有错。您可以考虑的其他选项只是使用一个表单，然后将您的标签输入配对包装在 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>
于 2012-04-06T04:12:03.250 回答
2

不要乱用太多标签。

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

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

于 2012-04-06T04:15:11.013 回答
0

我认为你应该像这样使用 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 类以正确对齐，即边距、填充、浮动等。

于 2012-04-06T04:15:53.697 回答
-1

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

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

于 2012-04-06T05:27:53.483 回答