Question

这个问题是由一个非常令人沮丧的问题引发的，我发现这个问题是我整个网站开发的主题。

我有一个这个主题的例子来展示，以补充我的解释。我的网站上有一个标题，在标题下面我想要一个非常标准的导航栏。您可以在http://www.ethoma.com/testhome.php看到此信息。标题是页面上唯一易于查看的img标记。以下是该部分页面的基本html和css结构。

<div class="container" onclick="hide();">
    <div class="hhshomehead">
    <div class="logowrap">
    <center>
        <img src="/ETPbrand.gif" />
    </center>
        </div>
        <div id="homeopt">
             <ul id="homeoptlist">
             <li id="homeoptnewpost">
         <a class="homeoptanchor" href="/hhsplus_create.php">
            New Post
         </a>
         </li>
         </ul>
         </div>
    </div>
    ...... more html .....
</div>

CSS：

.hhshomehead
{
    padding-top:8px;
    padding-bottom:8px;
    padding-left:8px;
    padding-right:8px;
    background-color:#ffffff;
    -moz-box-shadow: 3px 3px 3px #aaa;
    -webkit-box-shadow: 3px 3px 3px #aaa;
    box-shadow: 3px 3px 3px #aaa;
    width:100%;
    border-radius:10px;
}

.hhshomebody
{
    min-height:75%;
    width:100%;
}

.logowrap
{
    display:inline;
}

.homeopt
{
    padding-top:8px;
    padding-bottom:8px;
    padding-left:8px;
    padding-right:8px;
    width:100%;
    border-radius:10px;

}

.homeoptlist
{
    display:inline;
    list-style-type:none;
    float:left;
    margin-top:0px;
    margin-bottom:0px;
    padding-left:0px;
}

.homeoptanchor
{
    text-decoration:none;
    color:#1515b5;
    padding-bottom:3px;
    padding-top:3px;
    padding-right:3px;
    padding-left:3px;
}

.homeoptanchor:hover
{
    text-decoration:underline;
}

我知道class和id表示法不适合CSS和html。我把它更改为在这篇文章中正确显示。如果你看一下firebug中的结果代码，你会发现hhshomehead类似乎确实包含徽标图像，但不包含它下面的栏。我不知道是否有一些我缺少的关键元素，因为根据我的有限经验，如果标签有子节点，标签的子节点应该包含在父标签中。感谢任何花时间观看或回答这个问题的人 - 这里的每个人都非常乐于助人。（对不起，如果代码没有显示退出权限，我之前只发布过一次）

Answer 1

在您链接到#homeoptlist列表的网站上，floated会将其从文档流中删除。要让父div扩展以包含它，你需要'清除'浮点数，这可以通过对父元素应用'clearfix'来完成。见What methods of ‘clearfix’ can I use?

如何配置div以调整大小以包含内部div？

1 个答案: