CSS用dl定义列表实现冒号后折行

12月 08

Jay WeiCSS 20 Comments

在写武大讲座网的讲座信息详情时，对于冒号后折行的问题，折腾了许久~  写下来，分享下~

效果图：

dl1

查看演示
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;
}

20 Comments (+add yours?)

  1. Saco
    12月 25, 2010 @ 22:28:10

    恭祝博主圣诞快乐~

    回复

    • Jay Wei
      1月 01, 2011 @ 22:32:44

      博客不常打理~ 回复的时候只能祝您新年新气象啦~ 哈哈~

      回复

  2. 远走高飞
    3月 10, 2011 @ 10:03:58

    这方法真不错

    回复

  3. Content Generator
    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

    回复

  4. 匿名
    12月 25, 2022 @ 20:22:03

    回复

  5. Code Promo 1xBet
    1月 10, 2023 @ 00:11:44

    回复

  6. Промокод 1xbet
    1月 27, 2023 @ 05:15:25

    回复

  7. промокод на 1хбет при регистрации
    2月 08, 2023 @ 23:17:25

    Artificial intelligence creates content for the site, no worse than a copywriter, you can also use it to write articles. 100% uniqueness,5-day free trial of Pro Plan :). Click Here: https://whitestudios.ru/kassa/incs/1xbet_besplatno_stavka-2021.html

    回复

  8. промокод на 1хбет при регистрации
    2月 09, 2023 @ 12:08:07

    Artificial intelligence creates content for the site, no worse than a copywriter, you can also use it to write articles. 100% uniqueness,5-day free trial of Pro Plan :). Click Here: https://dakelin.ru/news/promokod_143.html

    回复

  9. промокод для 1xbet
    2月 09, 2023 @ 20:11:14

    Artificial intelligence creates content for the site, no worse than a copywriter, you can also use it to write articles. 100% uniqueness,5-day free trial of Pro Plan :). Click Here: https://ceramicinspirations.co.uk/articles/promokod_191.html

    回复

  10. melbet promo code 2023
    2月 11, 2023 @ 22:17:37

    回复

  11. 1xbet promo code nepal
    2月 12, 2023 @ 13:21:52

    回复

  12. 1x promo code india
    2月 12, 2023 @ 13:22:55

    回复

  13. промокод на мел бет
    2月 12, 2023 @ 19:43:06

    回复

  14. Phone Number For Reservations
    3月 01, 2023 @ 22:57:46

    Phone Number For Reservations: http://rentry.co/wgt3w

    回复

  15. Phone Number For Reservations
    3月 03, 2023 @ 09:44:12

    Phone Number For Reservations: http://pastelink.net/8bdcysco

    回复

  16. promo code 1xbet
    3月 07, 2023 @ 04:08:33

    1xbet registration promo code. Click Here: https://www.aamas.org/news/1xbet_free_code_registration.html

    回复

  17. where is my promo code in 1xbet
    3月 07, 2023 @ 18:01:33

    回复

  18. онлайн порно видеочат
    3月 08, 2023 @ 06:50:43

    девушки видеочат порно. Click Here: https://rt.beautygocams.com/

    回复

  19. промокод мелбет без депозита
    3月 08, 2023 @ 23:21:39

    melbet промокод на сегодня. Click Here: https://mebel-3d.ru/libraries/news/?melbet_2020_promokod_dlya_registracii_besplatno.html

    回复

Leave a Reply