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 {
    width: 600px;
}

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

演示

Try before buy

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

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

演示

Try before buy