css - 由于容器 div，表单内部的验证没有扩展到全宽

Question

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

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

如果您专注于，那么您将在字段之外看到验证错误。

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

Answer 1

尝试将消息从“块”更改为“内联块”。这似乎解决了定位问题。

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

块级元素会破坏流（有点像清除浮点数），但 inline-block 会将其保留在它之前的元素的流中，同时保留块级属性。

要防止消息换行，请停止使用white-space: nowrap属性换行元素文本。