Question

enter image description here

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

[label] [textbox]

[label] [combobox] [textbox]

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

*编辑：为了澄清，我没有使用表格来构建我的webforms。这是使用CSS完成的。但是，从一些评论来看，似乎表格可以排列我的控件。我认为这可能是最好的解决方案......

Answer 1

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

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

请注意，第一个是您的图像。是的，这不是100％完美，需要进行测试和调整，但只是想告诉你用CSS创建这个布局不是一个梦想。

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

如果你看一下标记，根本没有任何暗示布局，一切都是语义的并且使用类。如果有一天你想要彻底改变布局的外观，那么它就在你的CSS文件中。使用表格，您将不得不浏览HTML文件和 CSS文件中繁琐的<tr>和<td>以进行更改。同样，如果您想进行一个小的更改，则不受表标记的限制，这很难处理。

快速'n脏：

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

IE：Mac（臭名昭着的浏览器）：

IE:Mac

Answer 4

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

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

4 个答案:

HTML：

CSS：