为什么我的“内联阻止”功能不起作用？

Question

I've been trying to figure out why my #logo doesn't behave as it should, having display: inline-block; , #logo and #main_nav should be on the same line, however it doesn't. Why is this and how can I fix it?

---

 #logo { margin: 5px; background-repeat: no-repeat; background-size: 350px; width: 350px; height: 100px; background-image: url("http://www.jeffarries.com/media/pictures/logos/jeff_cursive.png"); display: inline-block; } ul, li { display: block !important; } li, ul { display: inline-block; } #main_nav { float: right; display: inline-block; margin: 10px; } .nav_button:link { text-transform: uppercase; display: inline-block; text-decoration: none; font-family: arial; font-size: 16px; margin: 10px; padding-bottom: 2px; position: relative; color: black; } .nav_button:visited { color: black; } 

 <a href="/"><div id="logo"></div></a> <div id="myNav" class="overlay"> <div id="main_nav" class="overlay-content"> <a class="nav_button" href="/">Home</a> <!-- <a class="nav_button" href="">Blog</a> <a class="nav_button" href="">Trips</a> --> <a class="nav_button" href="/politics">Politics</a> <!-- <a class="nav_button" href="">Pictures</a> --> <a class="nav_button" href="/videos">Videos</a></li> <!-- <a class="nav_button" href="">Computer</a></li> --> </div> <!-- close main_nav --> </div> <!-- close myNav--> 

Answer 1

Your parent #myNav doesn't have apply any style, so the browser default would set the display to block . Hence make it wrap to another line. Make it inline-block to fix the problem.

  #logo { margin: 5px; background-repeat: no-repeat; background-size: 350px; width: 350px; height: 100px; background-image: url("http://www.jeffarries.com/media/pictures/logos/jeff_cursive.png"); display: inline-block; } ul { display: block; } li, #myNav { display: inline-block; } #main_nav { float: right; margin: 10px; display: inline-block; } .nav_button:link { text-transform: uppercase; display: inline-block; text-decoration: none; font-family: arial; font-size: 16px; margin: 10px; padding-bottom: 2px; position: relative; color: black; } .nav_button:visited { color: black; } 

 <a href="/"><div id="logo"></div></a> <div id="myNav" class="overlay"> <div id="main_nav" class="overlay-content"> <ul> <li><a class="nav_button" href="/">Home</a></li> <li><a class="nav_button" href="/politics">Politics</a></li></ul> </div> <!-- close main_nav --> </div> <!-- close myNav--> 

Answer 2

Add width to your nav container and align the text to center. The inline-block depends on the space, it will move to second line if there is not enough space.

 #logo { margin: 5px; background-repeat: no-repeat; background-size: 350px; width: 350px; height: 100px; background-image: url("http://www.jeffarries.com/media/pictures/logos/jeff_cursive.png"); display: inline-block; } ul, li { display: block !important; } li, ul { display: inline-block; } #myNav { float: right; display: inline-block; text-align: right; vertical-align: top; margin-top: 25px; } #main_nav { width: 250px; margin: 10px; } .nav_button:link { text-transform: uppercase; display: inline-block; text-decoration: none; font-family: arial; font-size: 16px; margin: 10px; padding-bottom: 2px; position: relative; color: black; } .nav_button:visited { color: black; } 

 <a href="/"> <div id="logo"></div> </a> <div id="myNav" class="overlay"> <div id="main_nav" class="overlay-content"> <a class="nav_button" href="/">Home</a> <!-- <a class="nav_button" href="">Blog</a> <a class="nav_button" href="">Trips</a> --> <a class="nav_button" href="/politics">Politics</a> <!-- <a class="nav_button" href="">Pictures</a> --> <a class="nav_button" href="/videos">Videos</a> <!-- <a class="nav_button" href="">Computer</a></li> --> </div> <!-- close main_nav --> <!-- close myNav-->