CSS dl居頂是網頁中一種常見的布局方式，可以將dl元素中的dt和dd元素排列在一行顯示。下面我們來看一下如何使用CSS實現dl居頂。

dl {
display: table;
table-layout: fixed;
width: 100%;
}
dt,
dd {
display: table-cell;
vertical-align: top;
}

在上面的代碼中，我們將一個dl元素設置為表格布局，使其內部的dt和dd元素可以水平排列。同時使用table-layout屬性將表格的寬度固定，使其可以自適應網頁寬度。此外，還需要將dt和dd元素設置為表格單元格，使用display屬性設置為table-cell，而vertical-align屬性可使其頂部對齊。這樣就可以實現dl居頂的效果。

需要注意的是，當內容超過一行時，使用CSS dl居頂布局可能會使其顯示不太美觀。此時可以考慮使用CSS實現多列布局，在一個固定寬度的容器中顯示多列的dt和dd元素。

.container {
column-count: 2;
}

上述代碼中，我們使用了列數屬性column-count，將一個容器分為兩列，并自動將其中的元素均勻地填充到每一列中。這樣就可以將多行的dt和dd元素分為兩列進行顯示，更好地展示頁面內容。