在一个宽度中对齐内联块

Question

示例HTML：

<div id='b'>
    <span>1</span><span>2</span><span>3</span>
</div>
<div id='c'>
    <span>1</span><span>2</span>
</div>

<div id='d'>
    <span>1</span>
</div>

CSS：

div{
    text-align: center;
}
div span{
    display: inline-block;
    width: 100px;
    height: 200px;
    border: 1px solid #eee;
    background: #999;
    text-align: left;
}
#b{
    padding-left: 60px;
}
#b span{
    margin-left: -60px;
}
#c{
    padding-left: 20px;
}
#c span{
    margin-left: -20px;
}

＆LT; span＆gt;计数是动态的（最多10个）。所有跨度必须适合一个宽度＆lt; div＆gt ;,所以如果没有剩下的地方，那么这个地方的负边距。

如何在没有#b，＃c？

的情况下完成

Answer 1

将span元素设置为显示为表格单元格而不是内联块，这样它们将始终适合包含div中的一行：

div {
    display: table;
}

div span {
    display: table-cell;
}

JSFiddle demo