Question

我正在尝试将列表放在<div>中，以便我可以更改div的背景并使列表成为导航栏。

问题是列表中的项目实际上出现在div下面的水平行中。我不知道为什么会这样 - 它们是子元素，应该在<ul>内的<div>元素内浮动到彼此的左边，或者至少是我对它的理解。 / p>

当我删除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>";

这是CSS代码

#linkbar{
        padding: 5px;
        background-color: #31574A;
        color: white;
    }

#links{
        width: 100%;
        list-style-type: none;
    }

.menulinks{
        float: left;
        padding: 10px;
    }

Answer 1

您需要在列表末尾添加clear。

为什么我必须这样做？

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

Example：

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

Answer 2

默认情况下，浮动元素不会推送它们的容器。

你应该研究css clearfix。

在你的例子中，也许这样的事情可以解决问题：

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

试试吧！

问候。

Answer 3

在关闭div＃linkbar

之前添加<div style="clear:both"></div>

JSFiddle here

Answer 4

一个简单的解决方案（不需要添加新元素）只需将overflow:hidden;添加到包含浮动元素的元素中。

http://jsfiddle.net/UcqfA/

浮动列表出现在<div> </div>之外

4 个答案: