Question

我正在尝试将菜单的浮动部分调整到左侧，将另一部分调整到右侧。但是，我无法让它发挥作用。

我一直在尝试使用float来完成它，但我无法让它发挥作用。

我怎样才能以正确的方式做到这一点？

HTML

<div class="topbar">
    <div class="title">Title</div>

    <div class="topbar-boxes">

        <div class="topbar-boxes-left">
            <div class="topbar-box">Box1</div>
            <div class="topbar-box">Box2</div>
            <div class="topbar-box">Box3</div>
        </div>

        <div class="topbar-boxes-right">
            <div class="topbar-box">Box1</div>
            <div class="topbar-box">Box2</div>
            <div class="topbar-box">Box3</div>
        </div>

    </div>

    <div style="clear:both"></div>
</div>

CSS

.topbar {
    width: 100%;

    padding: 14px;

    font-size: 18pt;
    color: white;

    background-color: rgba(42, 42, 42, 0.95);
}

.title {
    float: left;
    padding-right: 50px;
}

.topbar-boxes {
    float: left;
    margin: -14px;
}

.topbar-boxes-left {
    float: left;    
}

.topbar-boxes-right {
    float: right;
}

.topbar-box {
    float: left;

    padding: 20px;

    border-left: 1px solid black;

}

http://jsfiddle.net/8eqSN/

Answer 1

你的问题是因为你正在浮动.topbar-boxes div。当你浮动时，元素的长度尽可能地变薄（而不是像你通常所期望的那样填充页面的宽度），所以你的浮动正在工作，你就是不能看到它，因为父div只与子元素一样宽。

要修复，请删除此浮动：

.topbar-boxes {
    /*float: left; <----- remove this.*/
    margin: -14px;
}

Answer 2

这是因为float元素取决于要定位的父项的width，因为框{父} topbar-boxes也浮动，width不是100％

根据你的结构而且由于 tittle 也是浮动的，我建议你删除那个容器，一切正常，取其他人的余量：

.topbar-boxes-left {
  margin: -14px;
  float: left;    
}
.topbar-boxes-right {
  margin: -14px;
  float: right;
}

选中 Demo Fiddle

Answer 3

容器div（.topbar-boxes）的宽度为：auto，默认情况下为每个元素。这意味着它的宽度将与其内容一样多。

尝试在.topbar-boxes中设置宽度：100％。

将div向左移动，其他div向右移动

3 个答案: