简单的导航左右对齐

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 文件中，

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

二手display:inline-块;

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/

简单的导航左右对齐

simple nav left and right alignment

css

html

html-lists

nav