在CSS中實(shí)現(xiàn)并排生成多行dt和dd的方法？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

創(chuàng)新互聯(lián)公司專注于朝天企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城網(wǎng)站建設(shè)。朝天網(wǎng)站建設(shè)公司,為朝天等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

由于不改變dt元素和dd元素的compact屬性在HTML5中已經(jīng)過時(shí)，所以需要在CSS進(jìn)行調(diào)整。

如何實(shí)現(xiàn)dt和dd并排

使用<dl> <dt> <dd>“定義列表”的描述方法

<dl> 
<dt>標(biāo)題</dt> 
<dd>目錄<dd> 
<dt>標(biāo)題</dt> 
<dd>目錄<dd> 
</dl>

像這樣，連續(xù)寫標(biāo)題和內(nèi)容，如果想把【標(biāo)題】和【內(nèi)容】進(jìn)行橫向排列的時(shí)候，你不能像表格那樣寫，或者即使你利用浮動(dòng)，也沒有地方可以寫clearfix。

在這種情況下，使用“float：left;”和“margin - left”，可以實(shí)現(xiàn)一種并排的方法。

給< dt > float：left；在那里使失去高度的< dt >的部分給予margin-left的方法。

如果是這種做法的話，即使內(nèi)容成為多行，也可以不破壞外表。

我們來看一個(gè)實(shí)例

假設(shè)你編寫Web站點(diǎn)的更新信息，首先，讓我們編寫HTML。

然后，編寫CSS，float-left給< dt >，< dd >里寫margin-left（這里好像80 px左右比較好。），

HTML

<dl>
  <dt>10月20日</dt>
  <dd>文字被添加<br>
  多行內(nèi)容出現(xiàn)</dd>
  
  <dt>10月20日</dt>
  <dd>文字被添加</dd>

  <dt>10月18日</dt>
  <dd>網(wǎng)站續(xù)訂</dd>
<dl>

CSS

dt{
  float: left;
}
dd{
  margin-left: 80px;
}

效果如下：也實(shí)現(xiàn)了水平對(duì)齊

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)在CSS中實(shí)現(xiàn)并排生成多行dt和dd的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：在CSS中實(shí)現(xiàn)并排生成多行dt和dd的方法
URL標(biāo)題：http://chinadenli.net/article12/ppgcdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、App設(shè)計(jì)、小程序開發(fā)、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)