Question

我正在尝试水平对齐中间的菜单，同时将徽标左侧对齐，语言选择右侧。我根本无法弄清楚的是如何在调整大小时保持相同的比例。我已经尝试了很多建议，但没有发现任何适合我的导航栏。以下是我的尝试：

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内嵌块，并将徽标和语言菜单放在左上角和右上角：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以在父级上使用flex，并且可以使用justify-content: space-between来分隔3个弹性儿童，但这不会真正使徽标居中。相反，我会在flex子项（或简称flex-grow: 1）上使用flex-basis: 0启用flex: 1 0 0;，以便它们占用相等的空间，然后适当地调整flex子项中的内容。如果需要，您也可以使用主容器上的align-items: center将所有内容垂直居中。

＆＃13;

#container {
  justify-content: space-between;
  align-items: center;
}

#container > * {
  flex: 1 0 0;
}

#lang-bar {
  flex-direction: column;
  align-items: flex-end;
}


#logo {
  max-width: 100px;
}

.flex {
  display: flex;
}
 
#menu {
  justify-content: center;
  list-style: none;
}

#menu li {
  margin: 0 .5em;
}

＆＃13;

<div id="container" class="flex">
  <div class="logoContainer">
    <img id="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png">
  </div>
  <ul id="menu" class="flex">
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact us</a></li>
  </ul>
  <ul id="lang-bar" class="flex">
    <li><a href="#">En</a></li>
    <li><a href="#">Fr</a></li>
  </ul>
</div>

＆＃13;

水平居中顶部导航，同时在左侧留下徽标，在右侧留下语言选择

2 个答案: