文字奇怪的行为，这是我的code：CSS - 显示inline-block的与新行

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我:)方面

来源

2012-04-27 markzzz

aspect - > expect; “最高宽度”是什么意思？你想如何工作？ – Elen 2012-04-27 11:01:00

你想让sportello operativo成为一条线还是两条线？如果你想sportello operativo在一行上，你将不得不增加它的父div宽度。就像这个例子http://jsfiddle.net/trickeedickee/sMyGV/4/ – frontendzzzguy 2012-04-27 11:04:51

你可以尝试使用白色空间：nowrap; – 2012-04-27 12:03:50

jsfiddle

如果你这样做，把红箱子一个< BR/>

宽度则匹配。没有它第二个红色框的宽度被扩展，因为它包含两个推出宽度的单词。你碰巧设置了一个宽度不够宽的字符，以便将这两个单词保持在同一行上。

sportello<br />operativo

来源

2012-04-27 11:05:09

对齐不能加上
。该字符串在一行中！我不会保留相同的词语...... – markzzz 2012-04-27 12:21:21

不知道这种行为对于您要完成的任务是否可以，但是如果您在.prodotto_pulsante_testo_titolo上设置了足够大的min-wdith， div的。然后这两个将是相同的大小，这反过来将垂直对齐它们。 – 2012-04-27 12:42:53

CSS - 显示inline-block的与新行

CSS

HTML

回答

相关问题