我正在尝试制作一个< dl>定义我在页面上使用的图标.我想要它,以便每个图标都在< dt>内.它的定义在以下< dl>内.在每个图标定义之后,我想要一个换行符.简单吧？好吧,IE7说没有！
这是我的HTML：
<dl style="display: block;" id="surveysIcons" class="icons">
<dt class="clearfix"><span class="icon"><img alt="Complete" title="" src="images/fiq_complete.png"></span></dt>
<dd>You have completed the survey</dd>
<dt class="clearfix"><span class="icon"><img alt="Incomplete" title="" src="images/fiq_incomplete.png"></span></dt>
<dd>You have missed the survey</dd>
</dl>
这是我的CSS：
dl.icons {
margin: 0 0 1em 0;
padding: 0;
width:100%;
overflow:hidden;
line-height:24px;
clear: both;
}
dl.icons dt {
clear:left;
margin:0;
float:left;
min-height:24px;
}
dl.icons dd {
padding: 3px;
margin: 0 0 0 5px;
float:left;
min-height:24px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* for IE/Mac */
我的方法是浮动< dt>和< dd>左,并清除每个< dt>,遗憾的是,它在IE 7中不起作用.
我尝试了所谓的魔法clearfix,但无济于事.这适用于Firefox和IE 8.
任何其他可能使这项工作成功的想法(最好不要改变太多的HTML)？谢谢！
解决方法
从dl.icons dd中删除float：left
