Question

所以我创建了一个名为top-section的ID，名为container的类和另外两个类logo＆amp; log-in。我希望top-section的背景颜色超过身体宽度的100％，而top-section内部我有3个带有徽标和登录的div。 logo div需要左移，log-in div需要向右浮动。这两个div都在container div内，宽度为80％。这是我的HTML

<div id="top-section">
    <div class="container">
        <div class="logo">
            Logo
        </div>
        <div class="log-in">
            Sign In
        </div>
    </div>
</div>

这里的CSS

#top-section{
    background-color: #f5f5f5;
    width: 100%;
    display: inline-block;
    margin: 0 auto;
    overflow: auto;
}
.container{
    width: 80%;
}
#top-section .logo{
    float: left;
}
#top-section .log-in{
    float: right;
}

我想要实现的是文字Logo和Sign In应该是top-section的背景颜色，但同时它们不应放在极端点体宽，即从类容器继承80％的宽度，因此它们从身体的最末端留下一些空间。类log-in工作正常并且从右边留下一些空格但是类logo存在一些问题，并且它没有从左边留下任何空间。是浮动吗？我如何解决它？这是我的小提琴http://jsfiddle.net/adityasingh773/76wmomh1/

Answer 1

您只需要将顶部的.container类居中对齐，这样它就不会对齐。

.container{
    width: 80%;
    margin: 0 auto; /*Add this*/
}

更新了小提琴here

Answer 2

只需将margin-left和margin-right添加到您的徽标并分别登录。

试试这个fiddle

更新：

另一种方法是将margin: 0 auto添加到.container

Answer 3

将margin: 0 auto;添加到.container。它80%的宽度为.top-section，但仍然位于左侧。这将使其居中并将您的其他元素放在您想要的位置。

修复CSS浮动

3 个答案: