如何在不使用表的情况下在CSS中执行此操作？

Question

通常情况下,使用表格会非常容易,但是现在每个人都说桌子很糟糕.我的大多数网络表单都是这样的:

[标签] [文本框]

[标签] [文本框]

[label] [combobox] [textbox]

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

*编辑:为了澄清,我没有使用表格来布局我的网页表格.这是使用CSS完成的.但是,从一些评论来看,似乎表格可以排列我的控件.我认为这可能是最好的解决方案......

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时给你.