dl表格 - 缺少底部边界线

时间:2011-05-24 13:10:17

标签: html css xhtml

<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可以被削弱和减少,请随意。

1 个答案:

答案 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;
}