Question

我在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>

Answer 1

这是因为你有一个浮动元素。如果你移除浮动，那么它将调整大小。以下是使用媒体查询删除较小屏幕尺寸的浮动的示例

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

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

当嵌套元素换行时，div不会调整大小

1 个答案: