Question

所以我之前已经正确地完成了这项工作，并找到了可行的示例，但我真的想弄清楚为什么这种情况正在发生。基本上我想要一个左侧和右侧的导航栏，而我现在尝试的方式是右侧被推下。

不要犹豫，告诉我这样做完全不同！在这一点上，我主要关心的是了解正在发生的事情以及发展良好的行业最佳实践。

继承我的代码

<header class="header">
<nav class="nav">
    <div class="nav-left">
        <ul>
            <li><a href="#">Blah</a></li>
            <li><a href="#">Blah</a></li>
            <li><a href="#">Blah</a></li>
        </ul>
    </div>
    <div class="nav-right">
        <ul>
            <li><a href="#">Bloh</a></li>
            <li><a href="#">Bloh</a></li>
        </ul>
    </div>
</nav>

nav {
    background: green;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav a {
    display: block;
    width: 60px;

}

.nav-left li {
    float: left;
}

.nav-right li {
    float: right;
}

Answer 1

你必须使 .nav-left 和 .nav-right 浮动并清除 .nav 元素。修改CSS如下：

nav { background: green; } nav:after { clear: both; content: '.'; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } nav ul li { display: inline-block; } nav a { display: block; width: 60px; } .nav-left { float: left; } .nav-right { float: right; }

在原始CSS文件中，＆lt; nav＆gt;将分配＆lt; li＆gt;渲染 .nav-left 的元素高度，导致 .nav-right 被推下的原因。使 .nav-left 和 .nav-right 浮动，这些元素没有预分配空间，因此它们可以位于相同的y位置。 / p>
在＆lt; nav＆gt;下创建所有元素之后元素浮动，逻辑上没有元素。因此，我们必须在导航中添加伪内容：在之后使其呈现正确的高度。

Answer 2

您的标记组织非常好。您的链接被推下的原因是因为nav-left占据了导航的整个宽度。这是一个 JSFiddle ：http://jsfiddle.net/fejut75a/2/。

请注意，您可以根据需要调整填充。

CSS：

nav {
    background: green;
    padding: 15px;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav a {
    display: block;
    width: 60px;
}

.nav-left {
    float: left;
}

.nav-left ul li {
    float: left;
}

.nav-right ul li {
    float: right;
}

Answer 3

我想你想要这样的东西：

DEMO

已使用的显示：内联块;

<强> HTML

<header class="header">
<nav class="nav">
    <div class="nav-left">
        <ul>
            <li><a href="#">Blah</a></li>
            <li><a href="#">Blah</a></li>
            <li><a href="#">Blah</a></li>
        </ul>
    </div>
    <div class="nav-right">
        <ul>
            <li><a href="#">Bloh</a></li>
            <li><a href="#">Bloh</a></li>
        </ul>
    </div>
</nav>

<强> CSS

nav {
    background: green;
    display:inline-block;
    height:45px;
    width:100%;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display:inline-block;
    overflow: hidden;
    float:left;
}

nav a {
    display: block;
    width: 60px;
}

li
{
    display:inline-block;
}

.nav-left {
    float: left;
}

.nav-right {
    float: right;
}

Answer 4

<nav class="nav">
    <div class="nav-left">
        <ul>
            <li><a href="#">Blah</a></li>
            <li><a href="#">Blah</a></li>
            <li><a href="#">Blah</a></li>
        </ul>
    </div>
    <div class="nav-right">
        <ul>
            <li><a href="#">Bloh</a></li>
            <li><a href="#">Bloh</a></li>
        </ul>
    </div>
</nav>


<!--css-->
nav {
    background: #ccc;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display:inline-block;
}

nav a {
    display: block;
    width: 60px;

}
.nav-left{
   float:left;  
}
.nav-right{
   float:right;  
}
.nav-left li {
    float: left;

}

.nav-right li {
    float: right;
}

https://jsfiddle.net/2xsL8gow/

简单的导航左右对齐

4 个答案: