Question

我正在尝试列出元素列表并在其下方显示一些文字：

<div class="ft_models">
    <dl>
        <dt>Models:</dt>
        <dd>
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
        </dd>
    </dl>
</div>

<div>
    Some stuff here
</div>

到目前为止，我的CSS读取

.ft_models
{
    margin: 10px 5px 10px 0;
    padding: 10px;
    background-color: #F8F8F8;
    color: #000;
}

.ft_models dt
{
    display: inline;
    float: left;
    clear: left;
    margin: 0 0.5em 0 0;
}
.ft_models dd
{
    display: inline;
    float: left;
    margin: 0 0.5em 0 0;
}

问题是，首先，我的项目列表的灰色框不会扩展到所有项目。第二个问题是后续的div（这里的一些东西）显示在项目列表的一侧而不是下面。

如何扩展项目列表周围的灰色框并在其下方显示以下div，而不是侧面？

http://jsfiddle.net/96pfX/

Answer 1

您需要清除浮动：

http://jsfiddle.net/WFnKw/

用于定义列表和背景框的CSS

1 个答案: