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元素。

如果要更改行为以使它们出现在同一行，您可以更改CSS中的display属性，如下所示：

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

Fiddle

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

2 个答案: