项目需要中

左边是房屋地址,右边显示几套房屋,如下图显示

============

开始想到使用 div标签,里面嵌套几个span,但是不利于对齐显示,一行还可以,多行了不方便

查找使用dl dt布局实现

---------------------------html---------------------------------------------

<dl>
<dt>房产地址:</dt>
<dd>1.北京市海淀区大兴路</dd>
<dd>1.北京市海淀区大兴路</dd>
<dd>1.北京市海淀区大兴路</dd>
<dt>房产地址:</dt>
<dd>1.北京市海淀区大兴路</dd>
<dd>1.北京市海淀区大兴路</dd>
<dd>1.北京市海淀区大兴路</dd>
</dl>

---------------------------css---------------------------------------------

已经在开始css reset设置了

dl, dt, dd{

padding:0;

margin:0;

}

这样清除了默认间距

section dt{
float: left;/*因为是块元素,如果不添加这个浮动,会第一行是标题,下面是内容.为了上去,给dt添加浮动,上去,在 margin-left撑开距离即可*/
margin-right: 10px;
}
section dd{
margin-left: 70px;
line-height: 140%;
}

=====================

下载地址:http://files.cnblogs.com/files/leshao/dt-list.rar

dt dl列表布局的更多相关文章

  1. [课程设计]Scrum 2.1 多鱼点餐系统开发进度(下单列表布局)

    [课程设计]Scrum 2.1 多鱼点餐系统开发进度(下单列表布局) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店 ...

  2. css + div 列表布局

    常见列表布局,效果如下图.常见图与图之间经常会留间距,下图图与图没留间距 1.第一种列表布局:float + margin 1.2.第一种列表布局相应代码 <!DOCTYPE html> ...

  3. android搜索框列表布局,流程及主要步骤思维导图

    android搜索框列表布局,流程及主要步骤思维导图 android搜索框列表布局,流程及主要步骤思维导图 activity_coin_search.xml----------<com.scwa ...

  4. android开发 RecyclerView 瀑布列表布局

    1.写一个内容的自定义小布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm ...

  5. android 开发 RecyclerView 横排列列表布局

    1.写一个一竖的自定义布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xml ...

  6. android开发 RecyclerView 列表布局

    创建一个一行的自定义布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...

  7. 【前端】Vue.js实现网格列表布局转换

    网格列表布局转换 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title& ...

  8. 拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭

    一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...

  9. DD DT DL标签

    我们平时常用的是< ul>< li>标签,不过dd.dt标签也蛮不错,特别是发布程序的时候功能模块列表什么的可以使用它来排版. < dl>< /dl>& ...

随机推荐

  1. python的简介及入门

    前言 为何使用Python Python 是一种效率极高的语言.与其他众多的语言相比,实现相同功能,使用Python编写的程序包含的代码更少.Python的语法简单,易上手,使用Python编写的代码 ...

  2. 机房收费系统——转换list泛型时,字段名称不正确应出现故障

    因为之前对泛型研究了一番,所以就開始尝试着在机房收费系统重构中增加了泛型的使用. 可是到了做学生查看剩余金额这个功能的时候,还是依照之前的方法做的,可是在载入数据的时候班级这个框就没有显示出来--然后 ...

  3. cocos2d+TexturePackerGUI动画制作

    转载请注明出处:http://blog.csdn.net/oyangyufu/article/details/25168047 程序效果图: 1.下载安装TexturePackerGUI 地址:htt ...

  4. JAVA随笔篇一(Timer源代码分析和scheduleAtFixedRate的使用)

    写完了基础篇,想了非常久要不要去写进阶篇.去写JSP等等的用法.最后决定先不去写.由于自己并非JAVA方面的大牛.眼下也在边做边学,所以决定先将自己不懂的拿出来学并记下来. Timer是Java自带的 ...

  5. xml概述(1)

    本节要点: 标记语言的定义 XML简介 XML与HTML 比较 XML与数据库比较 XML的特点 XML结构 1 标记语言的定义 "XML.SGML.HTML"中的"ML ...

  6. 腾讯云实力通过工信部测评,获全国范围CDN经营许可

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 近日,腾讯云提前完成了全国范围的CDN资质测评,顺利获得工信部颁发的CDN业务全国范围的经营许可证. 2017年1月份,工信部发布<关于 ...

  7. java读取请求中body数据

    java读取请求中body数据 /** * 获取request中body数据 * * @author lifq * * 2017年2月24日 下午2:29:06 * @throws IOExcepti ...

  8. 翻译:Identifier Qualifiers标识限定符

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  9. mybatis防止sql注入

         SQL注入是一种代码注入技术,用于攻击数据驱动的应用,恶意的SQL语句被插入到执行的实体字段中(例如,为了转储数据库内容给攻击者).[摘自] SQL injection - Wikipedi ...

  10. 【ANT】运行JMeter用例的build.xml

    <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...