當嵌套元素換行時，div不會調整大小

我在div內有一個標籤和一個文本框，其大小應該適合內容並以窗口爲中心。當窗戶足夠寬時，它們應該在列中。當窗戶太窄時，應該堆放。內部項目在窗口調整大小時進行換行，但是在文本框換行的位置，div不會調整大小。怎麼了？當嵌套元素換行時，div不會調整大小

<style> 
    label { 
     display: block; 
     float: left; 
     width: 10em; 
    } 
    input { 
     max-width: 98%; 
     width: 20em; 
    } 
    div.form-wrapper { 
     background-color: red; 
     display: table; 
     margin-left: auto; 
     margin-right: auto; 
     padding: .4em; 
     width: auto; 
    } 
</style> 
<div class="form-wrapper"> 
    <label for="Player">Player's name</label> 
    <input id="Player" type="text" /> 
</div>

來源

2014-02-16 Kevin Swarts

這是內置的行爲。不幸的是，我相信唯一的解決方法就是使用javascript，這可能比您希望爲這樣一個小問題做的更多。如果你想用js修復它，你可以[看看這個演示]（http://jsfiddle.net/yXxD6/55/），它可能會幫助 –

這是因爲你有一個浮動元素。如果你刪除浮動，那麼它將調整大小。下面是使用媒體查詢，除去較小的屏幕上浮動的例子大小

DEMO http://jsfiddle.net/x8dSP/2707/

@media screen and (max-width: 400px) { 
    label { 
    float: none; 
    } 
}

來源

2014-02-16 00:46:34 Vector

當你在使用js時如何同步媒體查詢寬度標籤和文本框寬度是動態的？ –

當嵌套元素換行時，div不會調整大小

回答

相關問題