Question

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

我有两个div：menuContainer和top，它们被另一个名为div的{{1}}包裹。

我希望topContainer和menuContainer在垂直方向上彼此不在一起，而不是在X角度下（并且我认为div是标准显示在另一个之下）但是它们同时出现在彼此和“内联”。

这就是我的浏览器中的样子（是的，我是f5：ed，小提琴显示同样的事情）：

top是水平CSS菜单的包装器。我希望它显示为白色区域顶部的标签menuContainer

为什么div显示为“inline”（查看hello所在的位置）以及如何编辑它看起来像我想要的那样？

top

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

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. */

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

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是需要浮动或内联的那个。因此，inline上的li和float: left上的a的调用是不必要的。

屏幕拍摄

第一张照片是您的代码，只删除了边距，因为您可以看到它的高度为0：

enter image description here

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

enter image description here

WRAP UP

所以问题不在于花车，而在于你使用它们的方式。浮动应该已添加到a的父级（li）。 li元素是需要内联的元素。但是由于你的CSS围绕那些花车构造的方式，你的风格在删除后搞砸了。我不得不重新构建一个充满CSS类的手来获得所需的结果。将来确保将浮点数添加到需要内联的元素中，而不是它们的子元素。

Answer 3

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

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

Answer 4

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

快速修复

从menuContainer移除保证金并将其添加到topContainer将＆＃34;解决＆＃34;这个问题在视觉上和＆＃34;看起来＆＃34;如你所愿，但它仍然是错误的代码，因为行为的原因仍然存在。

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

问题（我们将在下面找到）会被触发，因为边距会向下推动菜单，当top中的内容被推送时，它会找到一个空格出现在哪里。

问题

造成这种混乱的代码：

#navMenu a {
    float: left;
}

这里的问题是元素a已经获得了所有属性，这是没有充分理由的。这里发生的是它折叠了父元素。崩溃会使整个元素＆＃34;看不见＆＃34; 并且毫无用处。

float的作用是删除标准block - 通常构成li元素行为的属性，并导致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所做的是它检查浮动的内容到它的指定位置（在这种情况下为左）并告诉它＆＃34;保持清除它＆＃34;通过向下移动边框边缘，但a已完全折叠li，所有其他父项也已折叠，因此没有边框线但折叠了menu-container＆＃39}底部，这是上边距结束的地方。由于topContainer也已折叠，menuContainer的边距已移至可适合的位置;在topContainer之外。

因此; a元素在topContainer内部没有任何内容。 clear所做的边界发生在没有它的地方：topContainer的顶部。这就是为什么你可以看到top内容的框从a个元素开始的地方开始，允许＆＃34;你好＆＃34;在他们旁边弹出。

解决方案

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

#navMenu li {
  display: inline-block;
}

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

只是为了它，我在menuContainer上留下了边距，告诉你如果你把它放在那里或应该在哪里都没关系;在topContainer。

为什么我的div显示为“内联”？

4 个答案:

快速修复

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

问题

解决方案