css przerwy pozycjonowania względnego dział do nowej linii

Question

Mam następujący skrzypce na to pytanie: http://jsfiddle.net/jcb9xm44/

Istnieją 2 inline-block div w div nadrzędnej:

<div class="outer"> 
    <div class="inner1"> 
     Y 
    </div> 
    <div class="inner2"> 
     X 
    </div>  
</div> 

css przypisuje szerokości do div rodzica i 2 szerokości do div dziecka.

.outer { 
    width: 210px; 
    border: 1px solid red; 
} 

.inner1 { 
    width: 200px; 
    border: 1px solid orange; 
    display: inline-block; 
} 
.inner2 { 
    width: 50px; 
    position:relative; 
    left: -50x; 
    display: inline-block; 
    border: 1px solid lightblue;} 

Spodziewałem się, że oba elementy div pojawią się w tej samej linii. Chociaż rodzic nie jest wystarczająco szeroki, aby pomieścić oboje dzieci, ponieważ drugie dziecko ma ujemne przesunięcie, powinno być możliwe dopasowanie ich obu na tej samej linii. Dlaczego to łamie linię?

Answer 1

Dlaczego to łamie linię?

Tak jak powiedziałeś, dzieje się tak dlatego, że element nadrzędny nie jest wystarczająco szeroki dla obu elementów. Aby zmienić to zachowanie, można dodać element white-space: nowrap do elementu nadrzędnego, aby zapobiec zawijaniu elementów inline-block.

Example Here

.outer { 
    width: 210px; 
    border: 1px solid red; 
    position:relative; 
    white-space: nowrap; 
} 

notatki uboczne:

• Miałeś literówkę - left: -50x ->left: -50px.
• inline elementy respect whitespace in the markup.
• Granica elementu jest uwzględniona w obliczeniach szerokości. Użyj go, aby dodać box-sizing: border-box.
• Można alternatywnie użyć margin-left: -50px jako Mary Melody pointed out.