Question

我有以下表单，不使用标准<table>标记，而是使用CSS表格（display:table, display:table-row, display: table-cell）。直到这里没有问题发生，但后来我需要CSS中的一些colspans我无法应用。我使用column-span但它没有用！

HTML：

<div id="form">
<br/><br/>
    <form id="form_container">
        <span class="row">
            <span class="cell"><select></select></span>
            <span class="cell"><input type="text" /></span>
        </span>
        <span class="row">
            <span class="cell"><input type="email" /></span>
        </span>
        <span class="row">
            <span class="cell"><select></select></span>
        </span>
        <span class="row">
            <span class="cell"><select></select></span>
        </span>
        <span class="row">
            <span class="cell"><select></select></span>
        </span>
        <span class="row">
            <span class="cell"><input type="text" /></span>
            <span class="cell"><select></select></span>
        </span>
        <span class="row">
        <span class="cell"><input type="checkbox" /><b>I have read the</b> <a>Terms & Conditions</a></span>
        </span>
        <input type="image" src="img/send_button.png" />
    </form>
</div>

CSS：

#form_container {
    display: table;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
}

input, select {
    padding: 5px;
    border-radius: 5px;
}

Fiddle.

我想在只有一个单元格的行上使用colspan。是否可以使用CSS？

Answer 1

首先让div打扮成table气味错误，我会避免它。但是，如果你的目标是现代浏览器，你可以使用：nth-child伪选择器。

/* one item */
.cell:first-child:nth-last-child(1) {
     width: 100%;
}

/* two items */
.cell:first-child:nth-last-child(2) {
    width: 50%;
}

这个小提琴看起来像你的预期结果：http://jsfiddle.net/dZuAh/3/？

在CSS中制作colspans可以制作表格

1 个答案: