为什么我的div显示为"内联"？

Question

更新: 为什么 div正在出现,比如何删除问题更重要.如果我不知道为什么div会按照他们的方式出现,我将无法理解div如何工作.

---

我有两个div人:menuContainer而且top,他们被另一个div叫做包裹topContainer.

我希望 menuContainer并且top在垂直方向上彼此相对,而不是在X角度下(并且我认为div是彼此出现的标准),但它们彼此叠加并且"内联".

这就是我的浏览器中的样子(是的,我是f5:ed,小提琴显示相同的东西):

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菜单所基于的教程就是这个.

Answer 1

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

由于前一个元素折叠（但有边距），您#top正在逃逸边距。由于使用内部LI 元素而崩溃。
#menuContainerfloated

我创建了一个小型演示（代码较少）来反映您的问题；和 3 个解决方案

jsBin 演示

<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;（在元素上） 。#topLI set to inline-blockoverflow:auto;