html - 最大宽度的div不占用最大宽度

Question

我有一个页面，其中一个 div 位于“主”div 的中心。主 div 是全宽的，内部 div 的最大宽度等于“主”div 的宽度。当用元素填充它时，它只会填充大约一半的屏幕。我做错了什么？

编辑:我注意到有些人误解了上面的文字。我的元素(带有 float: left)将在其中的 4 个元素之后相互移动。那时 div 大约有 1000px 宽。这意味着最大宽度不是 100%，而是 50%。我检查了浏览器和 CSS，但没有其他选择器覆盖这些值。

CSS:(在 sass 中)

#main
  z-index: 0
  width: 100%
  min-height: calc( 100% )
  background: #FFFFFF
  position: absolute
  left: 0px
  top: 0px
  padding: 50px 0px
  text-align: center
  div.container
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    display: block
    max-height: 100%
    margin: 0 auto
    width: auto
    max-width: 100%
    overflow-y: auto
    overflow-x: hidden
    text-align: left

div.box
  width: 220px
  height: 200px
  border: 1px solid #5774FF
  padding: 19px
  margin: 10px
  float: left
  box-shadow: 1px 1px 4px #CCC

HTML:

<div id="main">
    <div class="container">
        <div class="box">
            <form action="/save" method="post">
                <input type="text" placeholder="code" name="name"/>
                <select name="education">
                    <option value="3">option 3</option>
                </select>
                <button type="submit">save</button>
            </form>
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
    </div>
</div>

Answer 1

您使用以下代码将 容器 居中:

position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)

当你给一个元素 position: absolute 和 left: 50% 时，它会自动移动自己和它的后续子元素(如果子元素不移动没有 position: absolute) 从左边到 50%。

如果您希望容器占据整个宽度，则必须删除以下内容:

position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)