5

在使用 HTML/CSS 和 Floats 时，我已经遇到这个问题很长时间了。

在图像中，您可以看到我有一个向左浮动的 Box Div，因为有很多这样的 Box。在盒子里面我有一个<UL>列表。列表项<li>也向左浮动。

正如您在图像中看到的那样，List 项目不会使它们位于 Expand 内部的 Box Div。我已经尝试了几件事，但运气不佳，希望有更多经验的人可以提供帮助？我无法在 Box Div 上设置固定高度，因为图标的数量总是不同的，并且需要扩展以修复它们。

在此处输入图像描述

现场演示：http: //jsfiddle.net/jasondavis/u5HXu/

<div class="module-box">
    <div class="module-box-title">
        <h4><i class="icon-cogs"></i>Admin Settings</h4>
        <div class="tools">
            <a href="#" class="collapse">-</a>
        </div>
    </div>
    <div class="module-box-body" style="display: block;">


        <ul>
            <li>
                <a href="#">
                    <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0">
                    <span class="module-icon password_assistant"></span>
                </a><br>
                <a href="#">Change<br>Password</a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0">
                    <span class="module-icon password_assistant"></span>
                </a><br>
                <a href="#">Change<br>Password</a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0">
                    <span class="module-icon password_assistant"></span>
                </a><br>
                <a href="#">Change<br>Password</a>
            </li>
        </ul>


    </div>
</div>

CSS

/* Modules homepage */
.module-box {
    margin: 0px 0px 25px 25px;
    padding: 0px;
    float: left;
    width: 464px;
}

.module-box-title {
    margin-bottom: 0px;
    padding: 8px 10px 2px 10px;
    border-bottom: 1px solid #eee;
    color: #fff !important;
    background-color: #333;
    height: 51px;
    line-height: 45px;
    border-radius: 3px 3px 0 0;
}

.module-box-title h4 {
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    margin-bottom: 7px;
}

.module-box-title .tools {
    display: inline-block;
    padding: 0;
    margin: 0;
    margin-top: 6px;
    float: right;
}
.module-box-title .tools a {
    font-size: 31px;
    color: #fff;
    text-decoration: none;
    line-height: 29px;
}

.module-box-body {
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: 0;
    padding: 10px;
    clear: both;
}

.module-box-body a {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 11px;
    color: #888;
    text-decoration: none;
}

.module-box-body li {
    float: left;
    margin: 0 12px 0 0;
    list-style: none;
}
4

4 回答 4

12

您需要使用 clearfix 或 clearing 元素清除浮动。

方法#1 clearfix

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

然后在包含元素上添加类

 <div class="module-box-body clearfix" style="display: block;">

http://jsfiddle.net/u5HXu/8/

方法#2 清除元素

.clear {
    clear: both;
}

然后在浮动元素之后添加以下 HTML。

<div class="clear"></div>

http://jsfiddle.net/u5HXu/9/

于 2013-02-27T21:41:48.633 回答
7

您可以overflow: hidden在父容器上使用技巧 (..module-box-body) ;) 修复一切。

http://jsfiddle.net/teddyrised/ct6gr/

于 2013-02-27T21:42:35.990 回答
2

改变你.module-box-body li的

.module-box-body li {
    display: inline-block;
    margin: 0 12px 0;
    list-style: none;
}

更新了小提琴。

于 2013-02-27T21:44:05.363 回答
1

尝试应用overflow:auto到容器，您想根据其内容（浮动项目）的高度调整其高度。

我会添加一个 jsfiddle 链接，但它最近对我来说根本不起作用。：/

于 2013-02-27T21:41:58.677 回答