html - 为什么我的 div 出现 "inline"？

Question

更新: 为什么 div 如此显示比如何解决问题更重要。如果我不知道为什么 div 会这样显示，我就不会理解 div 的工作原理。

---

我有两个 div:menuContainer 和 top，它们被包裹在另一个 div 中顶部容器。

我希望 menuContainer 和 top 在垂直方向上彼此重叠，而不是在 X Angular 上(我认为 div 出现在彼此下方是标准的)但是它们出现在彼此之上并且“内联”。

这就是它在我的浏览器中的样子(是的，我按了 f5:ed， fiddle 显示了同样的东西):

menuContainer 是水平 CSS 菜单的包装器。我希望它显示为 top

白色区域顶部的选项卡

为什么 div 显示为“内联”(查看 hello 所在的位置)以及如何将其编辑为我想要的样子？

body {
  background-color: #c2b074;
  color: #40371c;
  margin: 0px;
  font-family: Calibri;
}
/* Menu CSS */

#menuContainer {
  margin: 4em auto;
  background-color: #000000;
  width: 600px;
}
#navMenu {
  margin: 0px;
  padding: 0px;
}
#navMenu ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: center;
  background-color: #d4cbab;
}
#navMenu li {
  display: inline;
}
#navMenu a {
  float: left;
  text-decoration: none;
  color: #40371c;
  width: 6em;
  padding: 0.3em;
  margin: 0 1.2em 0 0;
  background-color: #d4cbab;
  border-radius: 10px 10px 0px 0px;
}
#navMenu a:hover,
#navMenu a#cart:hover,
#navMenu a#contact:hover,
#navMenu a#home:hover {
  background-color: #efefef;
  color: #40371c;
}
#navMenu a#current {
  background-color: #efefef;
}
#navMenu a#contact {
  background-color: #d4cbab;
}
#navMenu a#cart {
  background-color: #6a6145;
  color: #c2b074;
}
#navMenu a#home {
  background-color: #40371c;
}
/* Top content CSS */

#top {
  clear: left;
  width: 650px;
  height: 100px;
  margin: 0 auto;
  background-color: #efefef;
  border-radius: 10px 10px 0px 0px;
}

<div id="topContainer">
  <div id="menuContainer">
    <div id="navMenu">
      <ul>
        <li>	<a href="index.html" id="current">Home</a>

        </li>
        <li>	<a href="#" id="contact">Contact</a>

        </li>
        <li>	<a href="#" id="cart">Cart</a>

        </li>
      </ul>
    </div>
  </div>
  <div id="top">
    Hello
  </div>
</div>

CSS 菜单基于的教程是this one.

Answer 1

如何使用 CSS 正确设置水平导航？这是一个演示: jsBin demo

你的 #top是逃逸边距
由于折叠(但有边距)前一个元素 #menuContainer .由于使用内层而崩溃floated LI元素。

我创建了一个小型演示(代码较少) 来反射(reflect)您的问题；和 3 个解决方案

jsBin demo

<div id="parent">

  <div id="nav">
    <ul>
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
    </ul>
  </div>

  <div id="top">TOP ELEMENT</div>

</div>

/* Follow the steps. */
#parent{
  background:red; /* red color is visible cause #top has non-floated content */
}
#nav {
  background:gold;
  /* Can you see any GOLD background? 
     NO! cause UL height collapsed cause of floated LI
     So did the #nav height*/
}
#nav ul {
  padding:0;
  margin:0;
  background: #000;
  /* Can you see any BLACK background? NO!
     cause floated LI made the UL collapse */
}
#nav li {
  float:left; /* This line made UL collapse */
}
#nav{ /* (#nav again, I know, it's just to keep-on with steps) */
  /* margin:4em auto; /* Uncomment this line to add the margins */
      /* See the issue now? #nav is height 0 cause everything inside #nav is
      collapsed so #top moved to the nearest available position. */
  /* overflow:auto;   /* Uncomment this line to fix */
}
#top{
  clear:left;
}
/* Solutions:
1) instead of using floated LI make the `display:inline-block;`
2) don't set margin to #nav
3) set overflow:auto to #nav
4) Set height to the collapsed #nav but you'll get again issues if you make your design responsive. */

值得注意的是 clear:left; (在 #top 元素上)如果您使用 LI set to inline-block 则不需要或者你使用 overflow:auto;把戏。