如何从我的内联块元素中删除此白色背景

Question

我有以下html / css代码：

HTML

<div id="statusSteps">
    <span class="step complete">step 1</span>
    <span class="step complete">step 2</span>
    <span class="step complete">step 3</span>
    <span class="step">step 4</span>
    <span class="step">step 5</span>
</div>​

CSS

#statusSteps {
    display: inline-block;
    border: 1px solid black;
    padding: 0px;
    margin: 0px;
}

.step {
    display: inline-block;
    text-align: center;
    border-right: 1px solid black;
    padding: 0px 15px;
    font-weight:bold;
}

.step:last-child {
    border-right: none;
}

.complete {
    background-color: LightGray;
}​

我创建了一个JSFiddle来玩它：http://jsfiddle.net/wMShU/

在我尝试过的浏览器（Firefox，IE9和Chrome）中，步骤1和步骤2的左侧有一个白色区域。

有没有人知道一个很好的干净方法，让灰色背景的步骤填满整个区域？

Answer 1

将float: left;添加到.step课程。我添加了float: left并编辑了你的jsfiddle：http://jsfiddle.net/wMShU/1/

Answer 2

MiljanPuzović的解决方案有效，但是你可以完全删除display: inline-block（浮动元素都隐含display: block）。

问题的原因是inline-block元素受标记上的空格影响。如果删除<span>标记之间的空格（将使代码看起来很难看），则白色边距将会消失。

请参阅demo。