溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在CSS中實現并排生成多行dt和dd的方法？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
由于不改變dt元素和dd元素的compact屬性在HTML5中已經過時，所以需要在CSS進行調整。
如何實現dt和dd并排
使用<dl> <dt> <dd>“定義列表”的描述方法
<dl> <dt>標題</dt> <dd>目錄<dd> <dt>標題</dt> <dd>目錄<dd> </dl>
像這樣，連續寫標題和內容，如果想把【標題】和【內容】進行橫向排列的時候，你不能像表格那樣寫，或者即使你利用浮動，也沒有地方可以寫clearfix。
在這種情況下，使用“float：left;”和“margin - left”，可以實現一種并排的方法。
給< dt > float：left；在那里使失去高度的< dt >的部分給予margin-left的方法。
如果是這種做法的話，即使內容成為多行，也可以不破壞外表。
我們來看一個實例
假設你編寫Web站點的更新信息，首先，讓我們編寫HTML。
然后，編寫CSS，float-left給< dt >，< dd >里寫margin-left（這里好像80 px左右比較好。），
HTML
<dl> <dt>10月20日</dt> <dd>文字被添加<br> 多行內容出現</dd> <dt>10月20日</dt> <dd>文字被添加</dd> <dt>10月18日</dt> <dd>網站續訂</dd> <dl>
CSS
dt{
float: left;
}
dd{
margin-left: 80px;
}效果如下：也實現了水平對齊
感謝各位的閱讀！看完上述內容，你們對在CSS中實現并排生成多行dt和dd的方法大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
