HTML & CSS - Siła div> span> Span na tej samej linii

Question

mam prostą strukturę:

<div></div><span></span><span></span> 

ale chcę, aby zmusić je wszystkie w jednej linii! W tej chwili pojawiają się:

<div /> 
<span /><span /> 

niestety, muszę mieć pierwszy element jako div, mam małe uprawnienia do edycji html jak ja edycji za pośrednictwem innego programu, div działa jako pasek z punktu A wykres słupkowy (tak zaokrąglone rogi, szerokość = elementy jquery, brak treści i kolor bloku w środku), następna rozpiętość to wartość reprezentowana przez słupek, a ostatnia rozpiętość to wartość, z którą jest powiązana.

więc chcę

[____________] 25% ObjectA 
[________________________] 50% ObjectB 
[______] 12.5% ObjectC 
[______] 12.5% ObjectD 

a nie

[____________] 
25% ObjectA 
[________________________] 
50% ObjectB 
[______] 
12.5% ObjectC 
[______] 
12.5% ObjectD 

Answer 1

Put właściwość CSS display: inline-block na div, aby działać jak element inline zamiast objęcia całej linii.

Edit:

@ sugestia Mr_Green do korzystania z pseudo-element after wyczyścić każdy wiersz jest absolutnie konieczne, aby zapobiec zepsuty układ.

Answer 2

Od <div> elementów domyślnie display: block, który zajmuje całą dostępną szerokość, musisz ustawić go na display: inline-block. Będziesz także musiał ręcznie przerwać linię za pomocą <br> lub zrobić coś wyjątkowego na ostatnim <span>, aby wypełnić pozostałą dostępną przestrzeń.

Można również zawinąć każdy wiersz w inny element blokowy (taki jak inny <div>), aby utworzyć nowe wiersze.

Answer 3

Sugestia Dylana będzie działać, ale czasami, jeśli jedna z wartości div jest mniejsza, następny div zostanie wstawiony z tym elementem div. zobacz ten fiddle. Tak więc, moja sugestia jest użycie pseudo elementu :after, który będzie display: block. Ten pseudo element będzie dla ostatniego zakresu w każdej sekcji pręta.

div { 
    /* width and height are just for example */ 
    width: 100px; 
    height: 50px; 
    background-color: red; 
    display: inline-block; 
} 
div+span+span:after { /* last span element's pseudo element */ 
    content:""; 
    display: block; 
} 

Working Fiddle