Question

我有五个select输入，并希望在父div中水平分布它们此代码不起作用：

<div id="divtable">
    <select class="abc"></select>
    <select class="abc"></select>
    <select class="abc"></select>
    <select class="abc"></select>
    <select class="abc"></select>
</div>

css

#divtable{
    display:table;
    width:100%;
    table-layout:fixed;
    border:thin solid red;
}
.abc{
    display:table-cell;
    width:17%;
    margin:5px 0;
    padding:3px;
    border:thin solid #999;
    border-radius:3px;
}

小提琴是here

Answer 1

AFAIK，display: table-*结构需要完整的有效（假）表结构 - 相应的display: table-row和display: table-cell元素才能正常工作。（另外，我不希望首先将display: table-cell放在输入元素上。）

这有效：

<div id="divtable">
   <div class="tr">
    <div class="td">
    <select class="abc"></select>
    </div>

    ....

  </div>
</div>

http://jsfiddle.net/AVhXN/2/

虽然我个人真的会在使用之前使用表格 - 这种疯狂的div汤在语义上并不比表格，IMO更有用。

Answer 2

将abc类显示更改为内嵌：

.abc{
    display:inline;
    width:17%;
    margin:5px 0;
    padding:3px;
    border:thin solid #999;
    border-radius:3px;
}

如何在父级内部水平分配输入？

2 个答案: