html - 如何在父级内部水平分布输入？

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;
}

小提琴在这里

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 类显示更改为inline：

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