css - 如何在 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元素。

如果你想改变行为让它们出现在同一行，你可以改变displayCSS 中的属性，像这样：

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;
}

小提琴