텍스트와 함께 디스플레이 인라인 블록 이상한 행동이 내 code입니다 :CSS - 새로운 라인

CSS

<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; 있습니다

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. 상자에서 가장 긴 단어는 "operativo"입니다. 그래서 나는 같은 수직선에 정렬됩니다.

두 번째 상자에는 텍스트의 새 줄이 있는데, 이는 부모 div의 120 픽셀이므로 `prodotto_pulsante_testo_titolo`을 가장 높은 너비로 밀어 넣습니다.

왜이 동작입니까? Firefox와 Chrome에서 동일하다고 생각합니다. 그것은 당신이이 작업을 수행 할 경우, 다음 경기를 빨간색 상자의 < BR/>

폭을 넣어 IE에 I 측면 :

출처

2012-04-27 markzzz

aspect -> expect; '가장 높은 너비'이게 무슨 뜻입니까? 어떻게 작동시키고 싶니? – Elen

sportero operativo가 한 줄에 또는 두 줄로 표시 되길 원하십니까? sportello operativo를 한 줄에 표시하려면 부모 div 폭을 늘려야합니다. 이 예제에서와 같이 http://jsfiddle.net/trickeedickee/sMyGV/4/ – frontendzzzguy

과 같이 시도해 볼 수 있습니다. white-space : nowrap; –

jsfiddle

로 작동합니다. 그것없이 너비를 밀어내는 두 단어가 들어 있기 때문에 두 번째 빨간색 상자의 너비가 확장됩니다. 같은 줄에 두 단어를 모두 유지할만큼 너비가 넓지 않은 경우가 발생합니다.

sportello<br />operativo

출처

2012-04-27 11:05:09

에 동일한 세로 줄을 맞춰
을 추가 할 수 없습니다. 문자열은 한 줄에 있습니다! 나는 단어에 대해 같은 줄을 유지하지 않을 것이다 ... – markzzz

당신이 성취하고자하는 것에 대해이 행동이 잘 될지 확신하지 않지만, .prodotto_pulsante_testo_titolo에 min-wdith를 설정하면 divs. 그러면 두 개는 같은 크기가되고 수직으로 정렬됩니다. –

CSS - 새로운 라인

CSS

답변

관련 문제