html - 如何从我的内联 block 元素中删除这个白色背景

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

Miljan Puzović 的解决方案有效，但您可以删除 display: inline-block完全( float 元素都是隐式的 display: block )。

您的问题的原因是 inline-block元素受标记上的空白影响。如果删除 <span> 之间的空格标签(会让让你的代码看起来很丑)，白边会消失。

参见 demo .