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

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

演示

Try before buy

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

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

演示

Try before buy