在<dt>
造成这种情况的原因以及如何解决这个问题?
<dl class="rows">
<dt>Full Name</dt>
<dd>Peter Gates</dd>
<dt>Email Address</dt>
<dd>email@email.com</dd>
</dl>
CSS:
<style>
.rows dl {
float: left;
}
.rows dt {
float: left;
clear: left;
width: 150px;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid black;
}
.rows dd {
width: 150px;
float: left;
padding: 5px;
border-bottom: 1px solid black;
}
</style>
如果css可以被削弱和减少,请随意。
答案 0 :(得分:1)
具体而言,您需要将margin: 0
添加到.rows dd
。
这就是我编写/改进CSS的方法(使用修复程序):
请参阅: http://jsfiddle.net/gw4zW/3/
.rows {
float: left;
}
.rows dt, .rows dd {
float: left;
width: 150px;
padding: 5px;
margin: 0;
border-bottom: 1px solid black;
}
.rows dt {
clear: left;
font-weight: bold;
}