Question

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

在图像中你可以看到我有一个Box Div左侧浮动，因为有很多这些盒子。在盒子里面我有一个<UL>列表。列表项<li>也是Floated left。

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

enter image description here

现场演示：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;
}

Answer 1

您需要使用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/

Answer 2

您可以在父容器（..module-box-body）上使用overflow: hidden技巧;）修复所有内容。

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

Answer 3

将.module-box-body li更改为

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

更新了fiddle。

Answer 4

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

我最近添加了一个jsfiddle链接，但它根本没有用于。：/

CSS Float不会延伸Div Height

4 个答案: