DL表格 - 缺少底部邊框線

Question

存在缺失的底部邊框線隙<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可以impoved和減少。

Answer 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; 
}