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

3 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;
}

3 Comments (+add yours?)

  1. Saco
    十二 25, 2010 @ 22:28:10

    恭祝博主圣诞快乐~

    回复

    • Jay Wei
      一 01, 2011 @ 22:32:44

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

      回复

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

    这方法真不错

    回复

Leave a Reply