Question

我有一个简单的问题。我需要把内容放到div（宽度设置），但没有空格，所以浏览器把它放在下一行。

问题在这里可视化 - ＆gt; http://jsfiddle.net/QtAQa/1/

HTML

<div class="row">
    <div class="heading">Name:</div>
    <div class="data">
        <input type="text" />
    </div>
    <div class="error">Enter your name, please</div>
</div>

CSS

.row {
    width: 600px;
}
.row div {
    display: inline-block;
}
.heading {
    width: 300px;
    background: red;
}
.data {
    width: 200px;
    background: green;
}
.error {
    color: red;
}

以某种方式将div.error放在输入旁边会很棒，但是没有空间。

我不想使用position：absolute或position：relative，因为我不知道div.data有多宽。

我只能用css完成吗？

Answer 1

你row只是简短：

.row {
    width: 600px;
}

展开该容器，错误容器将适合。

<强>演示

Try before buy

另一种方法是使用它来强制浏览器不要打破空格：

.row {
    width: 600px;
    white-space: nowrap;
}

<强>演示

Try before buy

Answer 2

可以这样做：

.row {
    width: 600px;
    overflow: visible;
    position:relative
}
.row div {
    display: inline-block;
}
.heading {
    width: 300px;
    background: red;
}
.data {
    width: 200px;
    background: green;
}
.error {
    color: red;
    position: absolute;
    right: -60px;
    top:0;
}

http://jsfiddle.net/QtAQa/5/

位置元素，但没有剩余空间

2 个答案: