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

2023年7月17日 260次阅读

我正在尝试使用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文件)不断推动页面右侧的最后一个>(联系人).
《在导航栏中使用HTML flex / CSS在左侧显示徽标,向右显示菜单》

最佳答案 您可以从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>
点赞