HTML & CSS - Kraft Div> Span> Span auf derselben Zeile

Question

ich eine einfache Struktur haben:

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

aber ich möchte, dass sie alle auf einer Linie zwingen! im Moment, sie erscheinen:

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

Leider habe ich das erste Element als div haben, ich habe Kräfte wenig HTML-Bearbeitung, wie ich durch ein anderes Programm bin der Bearbeitung, wirkt die div als Bar von einem Balkendiagramm (also abgerundete Ecken, Breite = jquery Zeug, kein Inhalt und Blockfarbe im Inneren), der nächste Bereich ist der Wert, den der Balken darstellt und der letzte Bereich ist, was der Wert zugeordnet ist.

so mag ich

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

und nicht

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

Answer 1

die CSS-Eigenschaft Setzen display: inline-block auf der div, um es wie ein Inline-Element zu machen zu handeln, anstatt die ganze Linie der Aufnahme.

Edit:

@ Mr_Green Vorschlag das after Pseudoelement zu verwenden, um jede Zeile zu löschen ist unbedingt notwendig, ein gebrochenes Layout zu verhindern.

Answer 2

Da die <div> Elemente standardmäßig display: block sind und die gesamte verfügbare Breite einnehmen, müssen Sie sie auf setzen. Sie müssen auch die Linien manuell mit einer <br> brechen, oder machen Sie etwas Phantasie auf der letzten <span>, damit es den Rest des verfügbaren Speicherplatzes füllt.

Alternativ können Sie jede Zeile in ein anderes Blockelement (z. B. ein anderes <div>) umbrechen, um neue Zeilen zu erstellen.

Answer 3

Der Vorschlag von Dylan wird funktionieren, aber manchmal, wenn eine Breite des divs sehr klein ist, wird das nächste div mit diesem div Element inline kommen. Siehe hierzu fiddle. Also, mein Vorschlag ist, :after Pseudo-Element zu verwenden, das display: block sein wird. Dieses Pseudoelement wird für die letzte Spanne in jedem Balkenabschnitt verwendet.

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