由于容器分区，表单内没有扩展到全宽的验证

Question

我在输出为label标记的表单上有客户端验证。他们显示我希望他们的方式，但他们的宽度不会自动调整到它的内容。我相信这是由表单所在容器的宽度引起的。有人可以帮我解决这个问题吗？这里是一个的jsfiddle：

http://jsfiddle.net/4eZY6/3/

如果你专注于和域的关，你会看到验证错误。

将元素.home-form-container的宽度从250px更改为450px可以修复它，但我不希望该元素更宽。这是溢出问题吗？

Answer 1

尝试将消息从“block”更改为“inline-block”。这似乎解决了定位问题。

.field_with_errors .message { display:inline-block; white-space: nowrap; ... } 

块级元素将打破流（有点像清除浮动），但内联块将保持它在元件之前它的流动，同时保持块级属性。

为防止封装消息，请停止使用white-space: nowrap属性进行封装的元素文本。