Jak uniemożliwić wstawionym elementom div przejście do następnej linii w obrębie rodzica?

Question

Mam dwóch div śródliniowych, które przekraczają szerokość szerokość rodzica. Dlatego drugi div przechodzi do następnej linii: http://jsfiddle.net/uVqG6/2/

Jak mogę zachować oba elementy div na tej samej linii?

Dodanie overflow:hidden; do div.a po prostu ukrywa drugi element div.

Answer 1

Można użyć position: absolute; Do tego jeszcze żaden inny sposób oprócz zwiększania szerokości kontenera div lub czyni go nowrap

Demo

Korzystanie z-indexDemo

CSS

.a { 
    width: 100px; 
    height: 50px; 
    border: solid 1px #345; 
    position: relative; 
} 

.b { 
    width: 60px;  
    height: 50px; 
    background-color: red; 
} 
.c { 
    width: 50px;  
    height: 50px; 
    background-color: green; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

Answer 2

.a { 
width: 100px; 
height: 50px; 
border: solid 1px #345; 
white-space: nowrap; 
overflow:hidden; } 

Czy to robi to, co chcesz?

Answer 3

Elementy śródliniowe zachowują się tak samo, jak tekst. Jeśli chcesz zapobiec ich zawijaniu, usuń biały obszar używany do formatowania lub dodaj white-space:nowrap; do reguły dla .a.

Oto demonstracji: http://jsfiddle.net/bfkgT/

Answer 4

Tam kilka sposobów, aby to zrobić. Przede wszystkim możesz użyć display: inline-block; lub float: left;, aby divy usiadły obok siebie. Działają różnie, więc upewnij się, że używasz właściwego dla swojej sprawy.

Po drugie, żaden z nich nie zadziała, dopóki zawierający element div (a) nie będzie wystarczająco duży, aby zawierać oba elementy div w tym samym wierszu. Lub możesz użyć overflow: hidden; na zawierającym div (a).

Edit:

zaktualizowałem swój przykład: http://jsfiddle.net/uVqG6/11/

musiałem użyć white-space: nowrap;, ponieważ wewnątrz div zostały zawijania.

Oto kolejna odpowiedź, która odpowiada również na pytanie: CSS: how to stop text from taking up more than 1 line?

Pamiętaj, że za pomocą display: inline-block zasadzie traktuje jako element tekstu, więc większość właściwości css formatowania tekstu będą miały zastosowanie do niego.