html - 嵌套元素换行时 div 不调整大小

Question

我在 div 中有一个标签和一个文本框，其大小应适合内容并在窗口中居中。当窗口足够宽时，它们应该成列。当 window 太窄时，它们应该叠放。内部元素会随着窗口大小的调整而换行，但在文本框换行的位置，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>

Answer 1

这是因为您有一个 float 元素。如果你删除 float 然后它会调整大小。这是一个使用媒体查询删除较小屏幕尺寸上的 float 的示例

演示 http://jsfiddle.net/x8dSP/2707/

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