最小寬度的CSS不起作用

Question

我有一個表單，我將最大寬度設置為600 px，它可以完美地工作，當用戶提交表單並且出現錯誤時，我再次創建了表單，並向輸入字段分別輸入了錯誤消息。

問題是我希望表格擴展到有錯誤消息的地方。

我嘗試了什么

我用谷歌搜索了這個問題，然后發現了這個問題。 如何使div動態更改為內容寬度，並且即使瀏覽器窗口更改大小，它也保持該寬度？

我這樣嘗試過：

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

當然要刪除最大寬度，但這只是使表單看起來好像寬度為100％。

這是提交之前的jsfiddle

http://jsfiddle.net/e9Y4w/

提交后，這是jsfiddle： http : //jsfiddle.net/e9Y4w/1/

Answer 1

問題是您要在輸入中設置％寬度。 將其更改為特定的像素寬度，如下所示：

.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; */
...
}

Answer 2

如果我對您的理解正確，則希望停止必填字段文本的文本換行。

為此，只需將以下內容添加到您的表單中：

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

如果顯示足夠小，這將阻止它包裝文本，並確保容器隨文本一起增長，這是通過內聯塊完成的。

我還向input["text"]字段添加了最小寬度。 但這是個人喜好。

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