简单的导航左右对齐

所以我之前正确地做过这件事，发现了一些可行的例子，但我真的想弄清楚为什么这种情况正在发生。基本上我需要一个左侧和右侧的导航栏，而我现在尝试的方式是右侧被压下。简单的导航左右对齐

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

继承人我的代码

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

来源

2015-06-07 user3085077

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

来源

2015-06-07 02:52:41

非常感谢！是否有什么特别的原因让你在nav-left和nav-right中的“li”之前加上“ul”标签，但是没有在“？”之前加上前缀标签？ – user3085077

@ user3085077我认为在CSS选择器中更具体一些是更好的做法，这样可以更好地维护和组织您的代码。我会在a之前加上预先标记，我只是忘了这一次。 –

还有关于其他解决方案的任何想法？它使用哪一个或者它只是偏好？ – user3085077

你必须让.nav左和.nav右浮动并清除在的结尾浮动.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左，它导致为什么.nav右被推倒。制作.nav-left和.nav-浮动，这些元素没有预先分配空间，因此它们可以站在相同的y位置。

将所有元素设置为<nav>元素浮动后，逻辑上没有任何元素。所以我们必须在nav中添加伪内容：在之后，使其呈现正确的高度。

来源

2015-06-07 02:51:34 ericsk

的感谢！关于其他解决方案的任何想法以及为什么他们可能会更好或更糟？ – user3085077

我想你想是这样的：

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

来源

2015-06-07 02:52:47 divy3993

好的解决方案。 –

谢谢！对亨利解决方案有任何想法？有没有任何理由与其中一个去？ – user3085077

请参阅.nav-left和.nav-right是div的所以他们需要浮动（我的意思是浮动：左/右）。浮动到'李'就像有力地推动他们左/右，之后，你只需要小心使他们在单线，所以显示：inline-block;是为了那个。如果我想让文字向右/左移，将会使用文本对齐方式：左/右，所以我决不会将浮动元素设置为“li”。毕竟@亨利和我有不同的答案，但也是正确的。 – divy3993

-1

<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/

来源

2015-06-07 02:52:54

简单的导航左右对齐

回答

相关问题