CSS - 新しい行のテキストで表示インラインブロック奇妙な行動を

Question

これは私のcodeです：

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でも同じです。それはあなたがこれを行う場合、< BR/>

赤い箱の幅が一致入れ

Answer 1

jsfiddle

:) IE上でIの側面として動作します。それなし2番目の赤いボックスの幅は、幅を押し出す2つの単語を含んでいるので拡張されています。あなたは、同じ行に両方の単語を維持するのに十分な幅ではない幅を設定します。

sportello<br />operativo