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

但是，在第二个方框中，我在文本上有一个新行，导致父div的120px，将prodotto_pulsante_testo_titolo推到最高宽度。

为什么会这样？我认为这是正确的：在Firefox和Chrome上也是如此。它在IE上的方面起作用：）

Answer 1

jsfiddle

如果你这样做，请放一个＆lt; br /＆gt;

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

sportello<br />operativo

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

CSS

HTML

1 个答案: