如何在CSS中删除DIV后的换行符

Question

有没有办法防止在使用css的div后换行,但是有一个div最小宽度和另一个最大宽度？

比如我有

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

并希望它显示如下:

My Label: My text

我的文字在哪里浮动,我的标签占用了所有剩余的宽度？

我使用以下CSS,但.text div保持包装:

div
{
    display: inline-block;
}

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

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

**更新:JS FIDDLE* http://jsfiddle.net/jPrMG/

谢谢你的帮助

Answer 1

这不是你所看到的"突破"; 这是因为<div>元素默认为block元素.

如果要更改行为以使它们出现在同一行上,可以display在CSS中更改属性,如下所示:

display:inline;

要么

display:inline-block;

如果你仍然想拥有width或min-width拥有(如问题中所述)那么你需要后两者,inline-block.

希望有所帮助.

Answer 2

你可以使用CSS表模型:

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

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

小提琴