在导航栏中使用 HTML flex/CSS 在左侧显示徽标，在右侧显示菜单

Question

我正在尝试使用 flex-display 编写响应式水平导航栏（请参阅最终项目的附图），但我无法将矢量徽标缩小到左侧。这是我的代码：

HTML：

<nav>
    <div class="menuBar">
       <ol id="navList">
         <li><img id="menuLogo" src="img/fullLogo.png"></li>
         <li><a href="index.html">HOME</a></li>
         <li><a href="approach.html">APPROACH</a></li>
         <li><a href="services.html">SERVICES</a></li>
         <li><a href="portfolio.html">PORTFOLIO</a></li>
         <li><a href="meetUs.html">MEET US</a></li>
         <li><a href="blog.html">BLOG</a></li>
         <li><a href="contact.html">CONTACT</a></li>
       </ol>
    </div>
</nav>

如您所见，我已尝试将徽标（img 文件）放入其中以尝试将其对齐。这是我的 CSS：

CSS：

nav{
  width: 100%;
  margin: auto;
  background-color: white;
}

#navList{
  display: flex;
  flex-direction: row;
  width: 95%;
  margin: auto;
  justify-content: space-between;
}

#menuLogo{
  display: flex;
  width: auto;
  height: auto;
  max-width: 150px;
}

#navList li{
  list-style: none;
  border-bottom: none;
}

logo（img文件）一直推到最后

（联系方式）位于页面右侧。

Answer 1

您可以从ol 中取出徽标并执行类似的操作

.menuBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
}
img {
  width: 100px;
  height: auto;
  margin: 20px;
}
ol {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}
li {
  padding: 5px
}

<nav>
  <div class="menuBar">
    <img src="http://placehold.it/350x150">
    <ol id="navList">
      <li><a href="index.html">HOME</a></li>
      <li><a href="approach.html">APPROACH</a></li>
      <li><a href="services.html">SERVICES</a></li>
      <li><a href="portfolio.html">PORTFOLIO</a></li>
      <li><a href="meetUs.html">MEET US</a></li>
      <li><a href="blog.html">BLOG</a></li>
      <li><a href="contact.html">CONTACT</a></li>
     </ol>
  </div>
</nav>

Answer 2

您可以在第一个li 上使用flex:1;。

#navList {
  display: flex;
  flex-direction: row;
  width: 95%;
  margin: auto;
  padding: 0;
}

#navList li:first-of-type {
  flex: 1;
  margin: 0
}

#navList li {
  list-style: none;
  border-bottom: none;
  margin: 1em 1em 0;
  /* eventually : */
  white-space: nowrap;
}


nav {
  width: 100%;
  margin: auto;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)) bottom repeat-x;
  background-size: 100% 3px;
  background-color: white;
}

<nav>
    <div class="menuBar">
       <ol id="navList">
         <li><img id="menuLogo" src="http://dummyimage.com/185x70/FF0&text=LOGO"></li>
         <li><a href="index.html">HOME</a></li>
         <li><a href="approach.html">APPROACH</a></li>
         <li><a href="services.html">SERVICES</a></li>
         <li><a href="portfolio.html">PORTFOLIO</a></li>
         <li><a href="meetUs.html">MEET US</a></li>
         <li><a href="blog.html">BLOG</a></li>
         <li><a href="contact.html">CONTACT</a></li>
       </ol>
    </div>
</nav>