html - 水平居中顶部导航，同时在左侧保留 Logo ，在右侧保留语言选择

Question

我试图将菜单水平居中对齐，同时将 Logo 向左对齐，将语言选择向右对齐。我根本想不通的是如何在调整大小时保持相同的比例。我尝试了很多建议，但没有找到适合我的导航栏的建议。这是我正在尝试的:

CSS:

.nav-bar img {
    float: left;
}
.nav-bar {
    height: 70px;
    width: 100%;
}
#container {
  width: 1200px;
  margin: 0 auto;
  height: 70px;
}
.nav-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
  display:inline-block;
  vertical-align:top;
}
#menu {
  float: left;
}

#languages {
  float: right;
}

HTML:

  <div id="container">

    <img id="logo" src="image.svg">

    <ul id="menu">
      <li><a href="#">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">contact us</a></li>
    </ul>

    <ul id="lang-bar">
      <li><a href="#">En</a></li>
      <li><a href="#">Fr</a></li>
    </ul>
  </div>
</nav>

Answer 1

您可以为容器使用 text-align:center ，制作 ul 内联 block 并将 Logo 和语言菜单绝对定位在左上角和顶部右:

html,
body {
  margin: 0;
}

#container {
  width: 100%;
  text-align: center;
  position: relative;
  background: #ddd;
}

#container ul {
  list-style: none;
  display: inline-block;
}

#container ul li {
  display: inline-block;
  margin-right: 1em;
}

#logo {
  position: absolute;
  left: 0;
}

#lang-bar {
  position: absolute;
  right: 0;
}

<div id="container">

  <img id="logo" src="image.svg">

  <ul id="menu">
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact us</a></li>
  </ul>

  <ul id="lang-bar">
    <li><a href="#">En</a></li>
    <li><a href="#">Fr</a></li>
  </ul>
</div>