文章/答案/技术大牛

发布

社区首页 >问答首页 >在导航栏中使用HTML flex/CSS在左侧显示徽标，向右显示菜单

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

Stack Overflow用户

提问于 2016-05-19 18:02:39

回答 2查看 2.6K关注 0票数 4

我试图编码一个响应的水平导航栏使用挠性显示(见附件图片的最终项目)，但我无法得到大小的矢量标志向下和左边。这是我的密码：

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

css

flexbox

回答 2

Stack Overflow用户

发布于 2016-05-19 18:11:45

你可以从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>

票数 2

Stack Overflow用户

发布于 2016-05-19 18:24:00

您可以在第一个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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37330885

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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