min-width css不起作用

Question

我有一个表单，我将最大宽度设置为600 px它完美地工作，当用户提交表单并且有错误时，我再次创建表单，每个错误消息都输入到输入字段。

问题是我希望表单在有错误消息的地方展开。

我尝试了什么

我谷歌问题，我发现了这个问题How do I make a div dynamically change to content width AND have it remain that width even as the browser window changes size?

我试过这样：

.inputForm{
    min-width:600px;
    width: 100%;

删除当然的最大宽度，但只是使表格好像宽度为100％。

在提交

之前，这是一个小问题

http://jsfiddle.net/e9Y4w/

这是提交后的jsfiddle： http://jsfiddle.net/e9Y4w/1/

Answer 1

如果我理解正确，您希望停止所需字段文本的文本换行。

要执行此操作，只需将以下内容添加到表单中：

 .inputForm{
       min-width:600px;
       white-space: nowrap;
       display: inline-block;
...

这会阻止它包装文本并确保容器随文本增长（如果显示足够小），这是通过内联块完成的。

我还在input["text"]字段中添加了最小宽度。但这是个人偏好。

http://jsfiddle.net/e9Y4w/3/

Answer 2

问题是你在输入上设置％宽度。将其更改为特定像素宽度，如下所示：

.inputForm input[type="text"], .inputForm input[type="email"], .inputForm textarea, .inputForm select {
...
width: 420px; /*70%;*/
...
}

然后将您的表单更改为内联块，以便自动调整宽度并添加最小宽度：

.inputForm{
min-width:600px;
display: inline-block;
/* width: 100%; */
/* max-width: 600px; */
...
}