Чтобы разместить логотип рядом с панелью навигации?

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

Я сделал вам простейшего возможного Navbar

DEMO

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

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

Answer 2

Если вы используете 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>