如何在 100% 宽度的容器中将未知数量的流体 div 居中？

Question

我有一个 100% 宽度的容器（在另一个父 div 中），其中包含多达 6 个流体宽度项目，每个项目是容器宽度的 1/6 (16.66%)

当有 6 个子 div 时，这显然可以正常工作，但如果更少，我希望它们保持相同的宽度（完全 100% 父宽度的 1/6），但在容器内水平居中。

如果我在容器上使用边距或填充（或在容器内创建包装器），那么它会影响项目的百分比宽度（因为它会改变百分比相关的总宽度）。

我显然可以使用绝对定位和 JS 来解决这个问题，但如果可能的话，我希望能够通过 CSS 来解决。

有人能说明在这种情况下应该采取什么方法吗？

我创建了一个简单的 jsfiddle 来说明我的意思：http://jsfiddle.net/9L4Qd/

来自 jsfiddle 的代码：

body, html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 100%;
    background-color: #000000;
}

#container div {
    width: 16.66%;
    float: left;
}

<div id="container">
 <div style="background-color: #ffcc00;">
    Option 1
 </div>
 <div style="background-color: #cccc00;">
    Option 2
 </div>
 <div style="background-color: #ffcc00;">
    Option 3
 </div>
 <div style="background-color: #cccc00;">
    Option 4
 </div>
 <div style="background-color: #ffcc00;">
    Option 5
 </div>
</div>

非常感谢，

戴夫

Answer 1

使用display:inline-block代替浮点数

JSfiddle with 6 divs

Jsfiddle with 5 divs

CSS

body, html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 100%;
    background-color: #000000;
    text-align: center;
    font-size: 0;
}

#container div {
    width: 16.66%;
    display: inline-block;
    font-size:1rem
}