我如何在 CSS 中做到这一点而不使用表格？

Question

通常情况下，这对于表格来说非常容易，但每个人都说现在表格很糟糕。我的大部分网络表单都是这样的：

[标签] [文本框]

[标签] [文本框]

[标签] [组合框] [文本框]

我只是希望一切都整齐排列。

*编辑：澄清一下，我没有使用表格来布局我的网络表单。这是使用 CSS 完成的。但是，从一些 cmets 看来，表格似乎可以用来排列我的控件。我认为这可能是最好的解决方案...

Answer 1

我只在 FF6 和 Chrome 中进行过测试，但这是一种方法。

http://jsfiddle.net/e7T3g/3/

请注意，第一个是您的图像。是的，这不是 100% 完美的，需要进行测试和调整，但只是想向您展示使用 CSS 创建这种布局不是梦想。

（一个原因）为什么这比使用表格更好：

如果你看一下标记，根本就没有任何关于布局的建议，一切都是语义化的并且使用类。如果有一天你想彻底改变布局的外观，这一切都在你的 CSS 文件中。使用表格，您将不得不在 HTML 文件和 CSS 文件中处理大量乏味的 <tr>s 和 <td>s 才能进行更改。同样，如果您想进行一点小改动，您也不会受到表格标记的限制，这很难使用。

又快又脏：

<form>
    <div class="address">
        <label>Address</label><input>
    </div>
    <div class="city">
        <label>City</label><input>
    </div>
    <div class="state">
        <label>State</label>
        <select>
            <option></option>
            <option>___</option>
            <option>___</option>
        </select>
    </div>
    <div class="zip">
        <label>Zip</label>
        <input>
    </div>
    <div class="archive">
        <label>Archive Location</label>
        <input type="checkbox">
    </div>
</form>

input {
    padding:3px;   
}
label:after {
    content:":";   
}
form {
    background:#888;
    padding:15px 25px 10px 15px;
    width:470px;
    float:left;
    font:900 13px serif;
}
.archive,
.address {
    float:left;
    width:100%;  
    margin-bottom:3px;
}

.archive label,
.city label,
.address label {
    width:100px;
    text-align:right;
    float:left;
}
.address input {
    width:360px;
}
.zip input {
    width:70px;   
}
.address,
.zip {
    float:right;   
}
.city,
.state {
    float:left;  
    margin-right:8px;
}
.archive {
    margin-top:5px;   
}

有上百万种方法来做这个布局，（它还不是一个完整的 HTML 片段，我们缺少一些必需的属性）我相信我可以想出一个更好的版本，但我会留下那个作为你继续学习 CSS 的练习。

Answer 2

查看本教程：

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

您可以将表格用于表单，但我更喜欢使用 CSS，因为它更易于维护且性能更佳。严格来说，表格只能用于“表格数据”，这并不能准确描述表单字段...

Answer 3

利用 ems、p 标签和模块化 CSS 的强大功能：

HTML：

<form action="post" class="dummyForm" method="./" onsubmit="return false;">
    <fieldset class="formContainer">
        <legend class="formDescription">Form styling made easy!</legend>
        <p class="formElementWrapper">
            <label class="leftLabel formLabel" for="address">Address:&nbsp;</label>
            <input class="formElement orphanElement" id="address" name="address" type="text">
        </p>
        <p class="formElementWrapper">
            <label class="leftLabel formLabel" for="city">City:&nbsp;</label>
            <input class="cityInput formElement" id="city" name="city" type="text">
            <label class="formLabel" for="state">State:&nbsp;</label>
            <select class="formElement stateSelect" id="state" name="state">
                <option value="HI">HI</option>
            </select>
            <label class="formLabel" for="zip">Zip:&nbsp;</label>
            <input class="zipInput formElement" id="zip" name="zip "type="text">
        </p>
        <p class="formElementWrapper">
            <label class="leftLabel formLabel" for="archive">Archive Location:&nbsp;</label>
            <input class="formElement" id="archive" name="archive" type="checkbox">
        </p>
    </fieldset>
</form>

CSS：

form.dummyForm
{
    width: 40em;
    background-color: #999999;
    font-family: Times New Roman, serif;
    font-size: .8em;
    font-weight: bold;
}
legend.formDescription, fieldset.formContainer, form.dummyForm
{
    border: none;
}
label.formLabel
{
    width: auto;
    padding-top: .1em;
    float: left;
    clear: right;
}
label.leftLabel
{
    width: 9em;
    text-align: right;
}
input.formElement, select.formElement, textarea.formElement
{
    margin-right: .5em;
    float: left;
    clear: right;
    display: inline;
}
input.cityInput
{
    width: 9em;
}
select.stateSelect
{
    width: 4em;
}
input.zipInput
{
    width: 5em;
}
input.orphanElement, select.orphanElement, textarea.orphanElement
{
    width: 25em;
    float: left;
    clear: right;
}
p.formElementWrapper
{
    padding: .5em;
}

演示： http://www.fortybelow.ca/hosted/misc/ieforms/

---

作为奖励，以下是各种 IE 版本中的表单：

IE 6：

IE:Mac（一个臭名昭著的糟糕和过时的浏览器）：

Answer 4

根据您的编辑，不，表格仍然不适合布局，因为它是一种形式。您的输入仍然不是表格数据。您可以将整个内容包装在一个 div 中，并根据需要设置每个输入元素的样式。有关示例，请参阅其他答案中的 Smashing 链接。