导航栏对齐:左侧徽标，右侧链接 [英] Nav bar align: Logo on left, links on right

问题描述

我无法在导航栏上正确对齐.我想弄清楚如何让徽标部分留在导航栏的左侧，但将链接放在右侧.我试过使用 float: right 但我似乎无法让它只在链接上工作.我该怎么做?

I'm having trouble getting the alignments right on a nav bar. I'm trying to figure out how to get the logo part to stay on the left of the nav bar, but put the links on the right side. I've tried using float: right but I can't seem to get it to work on just the links. How can I do this?

https://jsfiddle.net/t46bcayd/1/

<nav>
    <ul>
        <li><a href="http://google.com/" class="logo">Logo</a></li>
        <li><a href="http://google.com/">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
    </ul>
</nav>

推荐答案

Flexbox 在这里是完美的...无需更改结构，除非您愿意.

Flexbox is perfect here...no need to change the structure, unless you want to.

body {
  margin: 0;
  padding: 0;
  font-size: 15px;
}
nav {
  background-color: black;
  margin: 0;
  overflow: hidden;
}
nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}
nav ul li {
  display: inline-block;
  list-style-type: none;
}
nav ul li a {
  color: white;
  background-color: red;
  display: block;
  line-height: 3em;
  padding: 1em 3em;
  text-decoration: none;
}
nav ul li:first-child {
  margin-right: auto;
}
nav ul li a.logo {
  background-color: green;
}
nav ul li a:hover {
  background-color: blue;
}

<nav>
  <ul>
    <li><a href="http://google.com/" class="logo">Logo</a>
    </li>
    <li><a href="http://google.com/">One</a>
    </li>
    <li><a href="#">Two</a>
    </li>
    <li><a href="#">Three</a>
    </li>
  </ul>
</nav>

这篇关于导航栏对齐:左侧徽标，右侧链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！