1

我有以下 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 的左侧有一个白色区域。

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

4

2 回答 2

4

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

于 2012-08-01T00:50:35.123 回答
4

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

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

见演示。

于 2012-08-01T00:57:57.777 回答