Question

朋友，

我决定问这个，因为我在互联网上看到了很多答案，但似乎没有人能给出明确答案。

在HTML文档中，我们在另一个内部有许多元素。最终我们要为这些元素添加填充和边距。

那么，如果我们想让所有内容水平对齐到页面中心怎么办？如果内容的宽度为1000像素，屏幕分辨率会因设备而异，那么最常见的解决方案就是（可以在基于网络浏览器的浏览器上使用）：

    body{
      width: 100%;
   }

    #content{
      width: 1000px;
      margin: 0 auto;
   }

但是如果我们在#content元素中有很多其他元素，比如由DIV元素组成的表，我们就会遇到一些问题。父级的高度不会调整到其子级的高度，填充和边距将无法正常工作（如果我们检查元素，我们将看到宽度和高度不符合预期），除非我们添加一些新规则。

我使用float: left但是头痛开始了！当我添加float: left时，只有这些元素才能正常工作，但父母不会。如果我将float: left添加到已设置margin: 0 auto的元素，则它将不再与页面中心对齐...

我已经看到了一些使用text-align: center到父级的解决方案，display: inline-block; float: none;使用了我们希望与中心对齐的元素。但它也有很多问题（例如，我们无法设置float规则）

你如何解决这个问题呢？

Answer 1

在元素上使用clear之后，您需要使用float以“清除浮动”并使高度传播到其父级。您可以使用clear:left（或右侧）清除float:left元素，但通常只需使用clear:both即可。

在下面的示例中，有两个版本的clearfixes，一个使用容器上的伪元素，另一个只是另一个元素。

Demo

<强> HTML

<div id="content">
    <nav>
        <ul>
            <li>Home</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </nav>
    <div class="float-me">Test1</div>
    <div class="float-me">Test2</div>
    <div class="clear"></div>
</div>

<强> CSS

#content {
    width: 500px;
    margin: 0 auto;
}

li {
    float:left;
}

/* our pseudo-element clearfix */
ul:after {
    display: block;
    content: "";
    clear: both;
}

.float-me {
    float:left;
}

.clear {
    clear:both;
}

网页中水平对齐的最佳解决方案？

1 个答案: