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

Question

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

我有两个 div：menuContainer 和 top，它们被包裹在另一个名为 topContainer 的 div 中。

我希望 menuContainer 和 top 在垂直方向上彼此重叠，而不是在 X 角度上（我认为 div 出现在彼此下方是标准的）但它们同时出现在彼此顶部 "inline".

这就是它在我的浏览器中的样子（是的，我 f5:ed 和 fiddle 显示了同样的东西）：

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

白色区域顶部的选项卡

为什么会出现 div "inline"（查看 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 元素而折叠。

我创建了一个小型演示 （代码较少） 来反映您的问题；和 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. */

值得注意的是，如果您使用 LI set to inline-block 或 overflow:auto; 技巧，则不需要 clear:left;（在 #top 元素上）。

Answer 2

你真的应该删除浮动。你不需要它们。您可以使用 display: inline-block:

完成同样的事情

FIDDLE

CSS

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

#menuContainer {
  margin: 4em auto 0;
  width: 600px;
}

#navMenu {
  margin: 0px;
  padding: 0px;
}

#navMenu ul {
   margin: 0 0 0 20px;
   padding: 0px;
   list-style-type: none;
   text-align: left;
}

#navMenu li {
  display: inline-block;
}

#navMenu a {
  display:block;
  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 {
   width: 650px;
   height: 100px;
   margin: 0 auto;
   background-color: #efefef;
   border-radius: 10px 10px 0px 0px;
}

更新

这个问题与其他一些人宣称的 margin 无关。随心所欲地更改边距，如果您在开发人员工具中检查 .menuContainer，您会看到它的高度仍然为 0。它因为花车而倒塌。只需像我在示例中所做的那样删除浮点数，它就可以正常工作。无论如何，它的结构都不正确，您在 a 标签上有浮动，但它们的父标签 li 是需要浮动或内联的标签。因此，在 li 上调用 inline 和在 a 上调用 float: left 是不必要的。

屏幕截图

第一张是您的代码，仅删除了边距，如您所见，它的高度为 0:

这是我的代码，没有浮动，ul 没有折叠，高度为 27px：

总结

所以问题不在于花车，而在于您使用它们的方式。浮点数应该添加到 a 的父级（即 li）。 li 元素是需要内联的。但是由于您的 CSS 围绕这些浮点数构建的方式，删除它们后您的样式变得一团糟。我不得不重组一手满满的 CSS 类以获得预期的结果。将来确保将浮动添加到需要内联的元素，而不是它们的子元素。

Answer 3

您需要将 margin 的重叠更改为下一个 div

#menuContainer {
    background-color: #000000;
    margin: 4em auto 0;/*changes*/
    width: 600px;
}

Answer 4

现在，只是为了写下我想阅读的答案（希望能帮助其他人了解这里刚刚发生的事情）

快速修复

从 menuContainer 中删除边距并将其添加到 topContainer 将 "solve" 视觉上的问题和 "look" 如您所愿，但它仍然是错误的代码 因为行为的原因仍然存在。

为什么保证金会触发该行为？

问题 （我们将在下面讨论） 被触发是因为边距将菜单向下推，并且当 top 中的内容被推上时, 它会找到 space 出现在有

的地方

问题

导致此混乱的代码段：

#navMenu a {
    float: left;
}

这里的问题是元素 a 无缘无故地获得了所有属性。这里发生的是它折叠了父元素。崩溃使整个元素 "unseen" 变得无用。

float 所做的是删除通常构成 li 元素行为的标准 block-属性，并导致 a 元素聚集在一行。这是预期的效果，但它也折叠了父元素 li，看起来像这样：

#navMenu li {
    display: inline; /*This doesn't do anything because of the collapse!*/
}

折叠向上进行到 ul，其中边距被故意折叠为属性 margin: 0px;。 menuContainer 在所有地方都崩溃了，但它在顶部。 a 元素漂浮在空无之上。所以出于所有目的，它也被折叠了。

此连锁反应已将整个菜单折叠成 topContainer，其中 top 现在或多或少位于 a 元素之上，但它被他们的属性。 a 元素是唯一没有折叠的元素。

假设浏览器存在的所有内容都是松散的浮动 a 元素，它们对父级 div.

没有边距或填充

这里有人试图解决这个问题：

#top {
    clear: left;
}

然而，clear 所做的是检查浮动内容到其指定位置 （在本例中为左侧） 并告诉它 "stay clear of it" 通过向下移动边框边缘，但是 a 已经完全折叠 li，所有其他父级也折叠了，所以没有边框线但折叠了 menu-container 的底部，这是上边距结束的地方。由于 topContainer 也被折叠，menuContainer 的边距已经移动到适合的位置； topContainer 之外。

所以； a 元素没有漂浮在任何东西上，而是漂浮在 topContainer 内部。 clear 制作的边框出现在没有它的地方：在 topContainer 的顶部。这就是为什么您可以看到 top 的内容框从 a 元素开始的位置开始，从而允许 "hello" 在它们旁边弹出。

解决方案

更好版本的解决方案如下所示：

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

#topContainer {
    margin: 4em auto 0 auto;
}

#menuContainer {
  margin: 0 auto;
  width: 300px;
}
#navMenu {
  margin: 0px;
  padding: 0px;
}
#navMenu ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#navMenu li {
  width: 3.5em;
  text-align: center;
  display: inline-block;
  padding: 0.3em;
  margin: 0 0 0 1.5em;
  background-color: #d4cbab;
  border-radius: 10px 10px 0px 0px;
}
#navMenu a {
  text-decoration: none;
  color: #40371c;
  padding: 0;
  margin: 0;
}
#navMenu li:hover{
  background-color: #efefef;
  color: #40371c;
}

/* Top content CSS */

#top {
  width: 350px;
  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>

我删除了一些不必要的代码。在这里你可以看到一个更好的结构，我们使用 li 元素作为要显示的块 in line:

#navMenu li {
  display: inline-block;
}

这是你需要定义列表元素（或菜单按钮）要水平显示在同一行的灵魂所在。

为此，我在 menuContainer 上留下了边距，以向您表明，无论您将它放在那里还是应该放在哪里都没有关系；在 topContainer.

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

Why do my divs appear "inline"?

html

css

快速修复

为什么保证金会触发该行为？

问题

解决方案