这是我的代码:
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 上一样工作 :)