html - 定位元素，但没有剩余空间

Question

我有简单的问题。我需要将内容放入 div （设置了宽度），但没有空间，所以浏览器将其放在下一行。

问题在这里可视化-> 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;
}

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

演示

先试后买

另一种方法是使用它来强制浏览器不中断空格：

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

演示

先试后买

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/