Question

考虑这个标记：

 <nav>
    <div id="logo"><img src="logo.png" height="44PX"/></div>
       <ul id="navItems">
                    <li><a href="#"">Link1</a></li>
                    <li><a href="#">Link2</a></li>
       </ul>
 </nav>

我使用这个css代码进行样式设计：

#navItems
{ 
    display:flex;
    z-index:1;
    position:fixed;
    top:0;
    background-color:#333;
    width:92%;
    height:44px;
    list-style-type:none;
}

如何将徽标放在导航栏旁边的左侧？

Answer 1

如果您使用display:flex，则不能只使用display:inline-flex？

#logo {
  display: inline-flex;
}

#navItems
{ 
  display:inline-flex;
  z-index:1;
  position:fixed;
  top:0;
  background-color:#333;
  width:92%;
  height:44px;
  list-style-type:none;
}

<nav>
  <div id="logo"><img src="logo.png" height="44PX"/></div>
  <ul id="navItems">
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
  </ul>
</nav>

Answer 2

我为您提供了最简单可能的导航栏

<强> DEMO

＆＃13;

html,
body {
  margin: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
ul img {
  height: 50px;
  float: left;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Change the link color to #111 (black) on hover */

li a:hover {
  background-color: #111;
}

＆＃13;

<nav>
  <ul>
    <img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" alt="">
    <li><a href="#">Link1</a>
    </li>
    <li><a href="#">Link2</a>
    </li>
  </ul>
</nav>

＆＃13;

要在导航栏旁边放置徽标？

2 个答案: