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

MiljanPuzovićによる解決策は機能しますが、display: inline-block完全に削除することもできます（フローティング要素はすべて暗黙的にdisplay: block）。

問題の原因は、inline-block要素がマークアップの空白の影響を受けていることです。<span>タグ間の空白を削除すると（コードが見苦しくなります）、空白がなくなります。

デモを参照してください。

于 2012-08-01T00:57:57.777 に答える
4

クラスに追加float: left;し.stepます。jsfiddleを追加float: leftして編集しました：http：//jsfiddle.net/wMShU/1/

于 2012-08-01T00:50:35.123 に答える