Html 出现在外部的浮动列表<；部门>；

我试图在

中放置一个列表，以便更改div的背景并使列表成为导航栏

问题是列表中的项目实际上出现在div下面的水平行中。我不知道为什么-它们是子元素，应该在

元素中彼此向左浮动，而

元素位于

中，或者至少这是我对它的理解

当我删除

float:left

时，它们工作正常，但以列表格式显示，而不是像我所希望的那样并排显示

为什么会这样

下面是创建HTML的PHP代码

echo <<<_HDOC
    <div id="header">
        Title
    </div>

    <div id="linkbar">
        <ul id="links">
_HDOC;

if ($_COOKIE['main'] == "")
    echo  "<li class='menulinks'>Register</li>  <li class='menulinks'>Login</li>";
else{
    $cookieparts = explode('&', $_COOKIE['main']);
    echo "<li class='menulinks'>Welcome $cookieparts[0]</li>  <li class='menulinks'>Logout</li>";
}

echo "<li class='menulinks'>About</li>  </ul></div>";

---

您需要在列表末尾添加一个

clear

为什么我必须这样做？

容器元素的高度不会自动调整为浮动的子元素。当某些东西浮动时，它将从传统流程中移除。要解决此问题，必须使用清晰的

:

CSS

li 
{
   float: left;
} 
.clearFix
{
   clear: both;
}

HTML

<div class="container">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <div class="clearFix"></div>
</div>

一,
二,
三,

默认情况下，浮动元素不会推送其容器

您应该研究css clearfix

在您的示例中，类似这样的操作可能会奏效：

#links:after {
    content: "";
    display: table;
    clear: both;
}

试试这个

问候。

在关闭div链接栏之前添加

JSFiddle

一个简单的解决方案（不需要添加新元素）是简单地添加

overflow:hidden到包含浮动元素的元素

@eZakto绝对不是一个坏习惯。好吧，在ul内潜水是一个坏习惯。：）在一个
@Gabe里面哪里有
你就不能添加一个。clearfix到
ul
而不需要添加另一个元素吗？@Paisle不，你不能这样做。我真的不明白你在这里做了什么。你能解释清楚一点吗？搜索clearfix。
#links:after {
    content: "";
    display: table;
    clear: both;
}