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

徽标（img文件）不断推送页面右侧的最后一个

（联系人）。

Answer 1

您可以从ol中取出徽标并像这样做

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

2 个答案: