4-9小慕医生开发（6）中视频13：45的医院公告li为什么清除浮动，以及我dt/dd位置不知如何实现
可以看出我的dd/dt位置高了点
相关截图：
这是我的效果
相关截图：
这是老师源码的效果
1 | <!-- 医院公告 --><br> <div class="notice"><br> <h3>医院公告</h3><br> <ol><br> <li><br> <div class="num">01</div><br> <dl><br> <dt><a href="#">《养生堂》</a></dt><br> <dd><a href="#">公郭立新主任 特殊时期糖尿病人的新冠…</a></dd><br> </dl><br> </li><br> <li><br> <div class="num">02</div><br> <dl><br> <dt><a href="#">《养生堂》</a></dt><br> <dd><a href="#">王少为主任 新型冠状病毒防控指引十八…</a></dd><br> </dl><br> </li><br> <li><br> <div class="num">03</div><br> <dl><br> <dt><a href="#">《我要当医生》</a></dt><br> <dd><a href="#">谭玲副主任 李同舟 姚晨蕊药师</a></dd><br> </dl><br> </li><br> <li><br> <div class="num">04</div><br> <dl><br> <dt><a href="#">《全民健康学院》</a></dt><br> <dd><a href="#">王建业院长 “医”路有你 健康同行</a></dd><br> </dl><br> </li><br> <li><br> <div class="num">05</div><br> <dl><br> <dt><a href="#">《健康北京》</a></dt><br> <dd><a href="#">王建业院长 莫把衰老当病治</a></dd><br> </dl><br> </li><br> </ol><br> </div><br> </div><br><br> ——————————————————以下CSS代码<br><br>.content .news-and-notice .notice{<br> float: left;<br> width: 329px;<br> height: 376px;<br>}<br>.content .news-and-notice .notice ol{<br> margin-top: 16px;<br>}<br>.content .news-and-notice .notice ol li{<br> height: 57px;<br> margin-bottom: 14px;<br>}<br>.content .news-and-notice .notice ol li:last-child{<br> margin-bottom: 0px;<br>}<br>.content .news-and-notice .notice ol li .num{<br> width: 53px;<br> height: 57px;<br> background-color: #00978E;<br> color: #FFF;<br> font-size: 30px;<br> text-align: center;<br> line-height: 57px;<br> float: left;<br> margin-right: 16px;<br>}<br>.content .news-and-notice .notice ol li dl dt a{<br> color: #666;<br>}<br>.content .news-and-notice .notice ol li dl dd a{<br> color: #999;<br>}<br> |
仔细观察后发现老师网页这部分的dd/dt的高度是25px
如果给dd和dt中的a标签加上行高25px，效果就能和老师的源码实现的效果一样，但是源码却不需要这么写
所以老师的源码到底是怎么实现这个效果的，我看了半天源码没搞明白
相关截图：
相关截图：
相关截图：
17
收起
正在回答 回答被采纳积分+1
2回答
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧