CSS用dl定义列表实现冒号后折行
12月 08
在写武大讲座网的讲座信息详情时,对于冒号后折行的问题,折腾了许久~ 写下来,分享下~
效果图:
查看演示
HTML
<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> <div class="lecture_info"> <dl class="speaker"> <dt>主讲人: </dt><dd>巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶 </dd></dl> <dl class="time"> <dt>时 间: </dt><dd>2010-11-22日2010-11-22日2010-11-22日2010-11-22日2010-11-22日2010-11-22日2010-11-22日2010-11-22日2010-11-22日 </dd></dl> <dl class="place"> <dt>地 点: </dt><dd>文理学部教五楼文理学部教五楼文理学部教五楼文理学部教五楼文理学部教五楼文理学部教五楼文理学部教五楼文理学部教五楼 </dd></dl> </div> |
CSS
body { font-family:Microsoft YaHei;,Tahoma,Arial; font-size: 12px; color:#666; } *{ margin:0px; padding:0px; } .lecture_info { width:490px; } .lecture_info dt { float:left; } .lecture_info dl { padding-left:35px; } .lecture_info dd { padding-left:48px; } .speaker { min-height:35px; padding-top:12px; background:url(images/speaker.gif) no-repeat; color:#3c99c9; } .time { min-height:28px; padding-top:8px; background:url(images/time.gif) no-repeat; } .place { min-height:28px; padding-top:8px; background:url(images/place.gif) no-repeat; } |
12月 25, 2010 @ 22:28:10
恭祝博主圣诞快乐~
1月 01, 2011 @ 22:32:44
博客不常打理~ 回复的时候只能祝您新年新气象啦~ 哈哈~
3月 10, 2011 @ 10:03:58
这方法真不错
11月 20, 2022 @ 08:36:51
Artificial intelligence creates content for the site, no worse than a copywriter, you can also use it to write articles. 100% uniqueness :). Click Here: https://stanford.io/3FXszd0
12月 25, 2022 @ 20:22:03
промокод на 1xbet. Click Here: http://www.newlcn.com/pages/news/promo_kod_1xbet_na_segodnya_pri_registracii.html
1月 10, 2023 @ 00:11:44
Code Promo 1xBet. Click Here: https://popvalais.ch/wp-includes/inc/?code-promo-1xbet-burkina-faso-78-000xof.html
1月 27, 2023 @ 05:15:25
промокод 1хбет. Click Here: https://www.medtronik.ru/images/pages/bonus_kod_na_1xbet_pri_registracii_6500_rubley.html