0

標準<table>タグではなく、CSS table( 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;
}

フィドル。

セルが 1 つしかない行に colspan が必要です。これはCSSで可能ですか？

4

1 に答える 1

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/ ?

于 2013-07-07T14:09:34.947 に答える