为什么我的`inline-block`不起作用？

Question

我一直试图找出#logo无法正常行事的原因，display: inline-block;，#logo和#main_nav应该是在同一条线上，但它没有。为什么这样，我该如何解决？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的父级#myNav没有应用任何样式，因此浏览器默认设置会将display设置为block。因此让它换行到另一条线。让它inline-block来解决问题。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

为导航容器添加宽度并将文本与中心对齐。 inline-block取决于空间，如果空间不足，它将移动到第二行。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;