我正在尝试将元素列表框起来并在其下方显示一些文本:
<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?
最佳答案
你需要清除 float :
关于用于定义列表和背景框的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8952883/