Css 浮动：为<；李>；在导航栏上方创建间距_Css_Navigationbar

Css 浮动：为<；李>；在导航栏上方创建间距

css

Css 浮动：为<；李>；在导航栏上方创建间距,css,navigationbar,Css,Navigationbar,使用float:left设置li标记的样式是创建水平导航栏的标准方法。但每当我这样做时，整个导航栏列表就会与包含的div分开删除float:left可以解决问题，但假设我想这样做 HTML 任何洞察都将不胜感激编辑：解决方案是在列表后添加空div，或者使用overflow:hidden设置包含div的样式在寻找了为什么会发生这种情况的解释之后，我发现了一个很好的链接来解释一切在ul后面添加一个div，样式为clear:left；-我想说得更详细一些，但我现在正在iPad上，正要睡觉在

使用float:left设置li标记的样式是创建水平导航栏的标准方法。但每当我这样做时，整个导航栏列表就会与包含的div分开

删除float:left可以解决问题，但假设我想这样做

HTML

任何洞察都将不胜感激

编辑：解决方案是在列表后添加空div，或者使用overflow:hidden设置包含div的样式

在寻找了为什么会发生这种情况的解释之后，我发现了一个很好的链接来解释一切

在ul后面添加一个div，样式为clear:left；-我想说得更详细一些，但我现在正在iPad上，正要睡觉

诀窍是，使用float的-使用clearfix。在您的情况下，在页眉结束标记之前添加以下内容：

考虑到其内部的浮动元素，这将使页眉拉伸。

诀窍是，使用浮动的-使用clearfixes。在您的情况下，在页眉结束标记之前添加以下内容：

考虑到其中的浮动元素，这将导致标题拉伸。

代替li css代码中的任何内容，放入

#header li{display:inline；}

（以及您的颜色和其他首选项）

代替li css代码中的任何内容，放入

#header li{display:inline；}

（以及您的颜色和其他首选项）

很有趣。你们怎么知道这些东西的？：）有人愿意解释为什么会发生这种情况吗？div标记会忽略最后包含的浮动元素吗？浮动元素没有边界框，这就是为什么父div边界框会忽略浮动的子元素LI的原因。style属性表示，它不能在两侧浮动，因为它在浮动元素之后，它就像一个标记一样工作，父div不会忽略它。我开发的每个页面都有类

。clearfix{clear:both；}

，因为它在页面中多次使用：）很有趣。你们怎么知道这些东西的？：）有人愿意解释为什么会发生这种情况吗？div标记会忽略最后包含的浮动元素吗？浮动元素没有边界框，这就是为什么父div边界框会忽略浮动的子元素LI的原因。style属性表示，它不能在两侧浮动，因为它在浮动元素之后，它就像一个标记一样工作，父div不会忽略它。我开发的每个页面都有class

.clearfix{clear:both；}

因为它在第页中被多次使用：）您的答案看起来就像是OP和下面的评论已经回答的内容的替代品。回答这个问题很好，但只是把它作为一个备选方案，而不是建议“取而代之”。你的答案看起来只是一个备选方案，与OP和下面的评论中已经给出的答案不同。回答这个问题很好，但只是把它作为一种选择，而不是建议“取而代之”。

<html>
<head>
  <link rel="stylesheet" type="text/css" href="temp.css" />
</head>
<body>
<div id="header">
  <h2>Demo: Navigation Bar</h2> 
  <ul id="navbar">
    <li>
      <a href="#">News</a>
    </li>
  </ul>
</div>
</body>
</html>

#header {
    margin: 10px;
    width: 8in;
    background-color: green;
    margin-left: auto; /* setting margin to auto centers block element */
    margin-right: auto; /* width must not be 100% */
}

#header ul { /* ul */
    list-style-type: none;
    padding: 0;
    margin-top: 0px;
}

#header li {
    display:block;
    float:left;
    background-color: silver;
    margin: 0;
}

<div style="clear: both"></div>