简单的导航左右对齐答案

【问题标题】：simple nav left and right alignment简单的导航左右对齐
【发布时间】：2015-06-07 02:37:21
【问题描述】：

所以我之前已经正确地做到了这一点，并找到了有效的示例，但我真的想弄清楚为什么会发生这种情况。基本上我想要一个左右两侧的导航栏，而我现在尝试的方式是将右侧向下推。

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

这是我的代码

<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;
}

【问题讨论】：

标签： css html html-lists nav

【解决方案1】：

您的标记组织非常好。您的链接被下推的原因是因为您的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;
}

【讨论】：

非常感谢！ nav-left 和 nav-right 中的“li”之前包含“ul”标签，但没有和 a 之前的前置标签，有什么特别的原因吗？
@user3085077 我认为在你的 CSS 选择器中更具体是一种更好的做法，这样你的代码可以得到更好的维护和组织。我会在 a 之前添加前置标签，但这次我忘了。
对其他可行的解决方案有什么想法吗？使用哪一个重要吗？还是真的只是偏好？

【解决方案2】：

您必须使 .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文件中，

在你使元素下的所有元素都浮动之后，逻辑上它里面没有元素。所以我们必须在 nav:after 中添加一个伪内容以使其呈现正确的高度。

【讨论】：

谢谢！关于其他解决方案的任何想法以及为什么它们可能更好或更差？

【解决方案3】：

我想你想要这样的东西：

DEMO

使用显示：inline-block；

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;
}

【讨论】：

很好的解决方案。
谢谢！对亨利解决方案有任何想法吗？有什么理由选择一个而不是另一个？
看到 .nav-left 和 .nav-right 是 div 的，所以他们需要浮动（我的意思是浮动：左/右）。给'li'浮动就像用力向左/向右推动它们，之后你只需要注意将它们放在单行上，所以 display:inline-block;是为此而设计的。如果我想向右/向左显示文本，我将永远不会在制作 div float:left/right 后将浮点数赋予“li”，而是使用 text-align:left/right。毕竟@Henry 和我都有不同的答案，但也是正确的。

【解决方案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/

【讨论】：