So entfernen Sie Zeilenumbrüche nach DIV in CSS

Question

Gibt es eine Möglichkeit, einen Zeilenumbruch nach einem div mit CSS zu verhindern, aber eine div min Breite und die andere maximale Breite zu haben?

Zum Beispiel habe ich

<div class="label">My Label:</div> 
<div class="text">My text</div> 

und wollen es wie angezeigt werden:

My Label: My text 

Wo Mein Text schwebt rechts, und mein Label nimmt die ganze verbleibende Breite?

ich folgende CSS verwenden, aber die .text div hält Verpackung:

div 
{ 
    display: inline-block; 
} 

.label { 
    border:1px solid blue; 
    width:100%; 
} 

.text { 
    border:1px solid red; 
float:right; 
} 

** UPDATE: JS FIDDLE *http://jsfiddle.net/jPrMG/

Danke für Ihre Hilfe

Answer 1

können Sie CSS-Tabellenmodell verwenden:

.label { 
    border:1px solid blue; 
    display: table-cell; 
    width: 100%; 
} 

.text { 
    border:1px solid red; 
    display: table-cell; 
    white-space: nowrap; 
} 

Fiddle

Answer 2

Es ist nicht ein 'Zeilenumbruch', den Sie sehen; Es ist, weil <div> Elemente standardmäßig ein block Element sind.

Wenn Sie das Verhalten ändern wollen, so dass sie auf der gleichen Zeile angezeigt wird, können Sie die display Eigenschaft in CSS ändern, etwa so:

display:inline; 

oder

display:inline-block; 

Wenn Sie noch wollen width oder min-width Eigentum haben (wie in der Frage angegeben) dann würden Sie die letztere von diesen zwei, inline-block benötigen.

Hoffe, dass hilft.