html - CSS - 在新行上显示带有文本的内联块奇怪行为

Question

这是我的代码：

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”，所以我认为它们将对齐到同一条垂直线。

但是，在第二个框中，我在文本上有一个新行，原因是父 div 的 120px，它推prodotto_pulsante_testo_titolo到了最高宽度。

为什么会有这种行为？我想这是正确的：在 Firefox 和 Chrome 上也是如此。它就像我在 IE 上一样工作 :)

Answer 1

jsfiddle

如果你这样做，放一个 <br />

然后红色框的宽度匹配。没有它第二个红色框的宽度被扩展了，因为它包含了两个单词，它推出了宽度。您碰巧设置的宽度不足以将两个单词保持在同一行。

sportello<br />operativo