0

これは私のコードです:

CSS

div
{
    height:30px;
}

.prodotto_pulsante_testo_centrato
{
    display:block;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    width:120px;
}

.prodotto_pulsante_testo_numero
{
    display:inline-block;
    width:23px;
    position:absolute;
    left:-31px;
    bottom:-1px;
    background-color:green;    
}

.prodotto_pulsante_testo_titolo
{
    display:inline-block;
    margin-left:23px;
    position:relative;
    background-color:red;  
    text-align:left;    
}

HTML

<div>
    <span class="prodotto_pulsante_testo_centrato">
        <span class="prodotto_pulsante_testo_titolo">
            operativo
            <span class="prodotto_pulsante_testo_numero">4</span>                                    
        </span>
    </span>       
</div>    

<div>
    <span class="prodotto_pulsante_testo_centrato">
        <span class="prodotto_pulsante_testo_titolo">
            sportello operativo
            <span class="prodotto_pulsante_testo_numero">4</span>                                    
        </span>
    </span>       
</div>

赤いボックスはdisplay:inline-block;です。ボックス内の最も長い単語は「operativo」であるため、同じ垂直線に揃えることができます。

しかし、2 番目のボックスでは、親 div の 120px が原因で、テキストに新しい行があり、これprodotto_pulsante_testo_titoloが最大幅にプッシュされます。

なぜこの振る舞いをするのですか？私はそれが正しいと思います: Firefox と Chrome で同じです。それは私がIEでアスペクトするように動作します:)

4

1 に答える 1

0

jsfiddle

これを行う場合は、< br />

赤いボックスの幅が一致します。それなし 幅を押し出す 2 つの単語が含まれているため、2 番目の赤いボックスの幅が拡張されます。たまたま、両方の単語を同じ行に維持するのに十分な幅の幅を設定していません。

sportello<br />operativo
于 2012-04-27T11:05:09.203 に答える