Html CSS-显示内联块奇怪行为，文本位于新行

这是我的：

CSS HTML 红色框显示为：inline block；。框中最长的单词是operativo，因此我认为它们将与同一条垂直线对齐

但是，在第二个框中，我在文本上有一个新行，这是由于父div的120px，它将prodotto\u pulsante\u testo\u titolo推到了最高宽度

为什么会有这种行为？我想这是正确的：Firefox和Chrome上也是如此。它的工作原理与我在IE上的工作原理相同：

如果这样做，请放置一个

然后，红色框的宽度匹配。如果没有它，第二个红色框的宽度将被扩展，因为它包含两个字，这两个字会将宽度向外推。您碰巧设置的宽度不够宽，无法将两个单词保持在同一行上

sportello<br />operativo 

---

方面->期望；最高宽度这意味着什么？您希望它如何工作？您希望sportello operativo在一条线上还是在两条线上？如果希望sportello operativo位于一条线上，则必须增加其父div宽度。就像在这个例子中，你可以尝试使用空白：nowrap；事实上，我想要两行如果寡妇还不够。。。但与同一垂直线对齐时无法添加。绳子在一条线上！我不会为单词保留相同的行…不确定这种行为是否适合您试图完成的任务，但是如果您将min wdith设置为on.prodotto_pulsante_testo_titolo足够大以容纳任何一个div的内容。然后这两个将是相同的大小，这反过来将使他们垂直对齐。

<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>    

sportello<br />operativo