Question

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

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

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

Answer 1

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

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

块级元素会破坏流（类似于清除浮点数），但是内联块会将它保留在元素的流中，同时保持块级属性。

要阻止邮件换行，请使用white-space: nowrap属性将元素文本包装起来。