css3: dl中如何讓dr和dt視覺(jué)上顯示到同一行?
問(wèn)題描述
用dl來(lái)實(shí)現(xiàn)如圖京東二級(jí)導(dǎo)航,但是自己dr跟dd總排不到一行.做了個(gè)demo觀察了一下 ,發(fā)現(xiàn)dr跟dd的浮動(dòng)十分特殊,見(jiàn)圖(已將dd的margin設(shè)為0).普通p在同一方向float效果如兩個(gè)灰色方塊.而dr和dd有重疊部分而且是下邊框?qū)R.那么請(qǐng)問(wèn)該該如何實(shí)現(xiàn)?
CSS如下
dl, dr, dd {display: block; } dl {overflow: hidden;width: 400px;background-color: #cc6666; } dr {width: 60px;float: left;background-color: #66cc66; } dd {margin: 0;padding: 0;float: left;width: 300px;background-color: rgba(0, 0, 0, .2); } .floatL {width: 100px;height: 100px;margin: 4px;float: left;background-color: #666; }
多謝1L指正.啊!!我的眼睛!!
問(wèn)題解答
回答1:有dr標(biāo)簽?dl dt dd吧...把dt和dd設(shè)為inline-block不就行了.
相關(guān)文章:
1. javascript - 關(guān)于apply()與call()的問(wèn)題2. javascript - axios請(qǐng)求回來(lái)的數(shù)據(jù)組件無(wú)法進(jìn)行綁定渲染3. java - 在用戶不登錄的情況下,用戶如何添加保存到購(gòu)物車?4. javascript - JS變量被清空5. javascript - 有適合開(kāi)發(fā)手機(jī)端Html5網(wǎng)頁(yè)小游戲的前端框架嗎?6. Python中使用超長(zhǎng)的List導(dǎo)致內(nèi)存占用過(guò)大7. css3 - 純css實(shí)現(xiàn)點(diǎn)擊特效8. 安全性測(cè)試 - nodejs中如何防m(xù)ySQL注入9. javascript - jQuery post()方法,里面的請(qǐng)求串可以轉(zhuǎn)換為GBK編碼么?可以的話怎樣轉(zhuǎn)換?10. html5 - 請(qǐng)問(wèn)現(xiàn)在主流的前端自動(dòng)化構(gòu)建工具是哪個(gè)?
