css3: dl中如何让dr和dt视觉上显示到同一行?
大家讲道理
大家讲道理 2017-04-17 11:24:29
0
1
700

用dl来实现如图京东二级导航,但是自己dr跟dd总排不到一行.做了个demo观察了一下 ,发现dr跟dd的浮动十分特殊,见图(已将dd的margin设为0).
普通p在同一方向float效果如两个灰色方块.而dr和dd有重叠部分而且是下边框对齐.
那么请问该该如何实现?



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指正.啊!!我的眼睛!!

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回覆 (1)
小葫芦

有dr标签?dl dt dd吧...把dt和dd设为inline-block不就行了.

    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!