dt dl列表布局
项目需要中
左边是房屋地址,右边显示几套房屋,如下图显示

============
开始想到使用 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列表布局的更多相关文章
- [课程设计]Scrum 2.1 多鱼点餐系统开发进度(下单列表布局)
[课程设计]Scrum 2.1 多鱼点餐系统开发进度(下单列表布局) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店 ...
- css + div 列表布局
常见列表布局,效果如下图.常见图与图之间经常会留间距,下图图与图没留间距 1.第一种列表布局:float + margin 1.2.第一种列表布局相应代码 <!DOCTYPE html> ...
- android搜索框列表布局,流程及主要步骤思维导图
android搜索框列表布局,流程及主要步骤思维导图 android搜索框列表布局,流程及主要步骤思维导图 activity_coin_search.xml----------<com.scwa ...
- android开发 RecyclerView 瀑布列表布局
1.写一个内容的自定义小布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm ...
- android 开发 RecyclerView 横排列列表布局
1.写一个一竖的自定义布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xml ...
- android开发 RecyclerView 列表布局
创建一个一行的自定义布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...
- 【前端】Vue.js实现网格列表布局转换
网格列表布局转换 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title& ...
- 拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭
一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...
- DD DT DL标签
我们平时常用的是< ul>< li>标签,不过dd.dt标签也蛮不错,特别是发布程序的时候功能模块列表什么的可以使用它来排版. < dl>< /dl>& ...
随机推荐
- C# DropDownList 绑定枚举类
第一种 DropDownList_Franchiser_Type.DataSource = ListTypeForEnum(); DropDownList_Franchiser_Type.DataVa ...
- day5、文件乱码怎么解决
1.1 Linux下,如何将一个乱码的文件进行重命名 方法一: 命令格式:mv $(ls |egrep "[^a-zA-Z0-9.-]") tandao.tx [root@nb ...
- Python爬虫(十五)_案例:使用bs4的爬虫
本章将从Python案例讲起:所使用bs4做一个简单的爬虫案例,更多内容请参考:Python学习指南 案例:使用BeautifulSoup的爬虫 我们已腾讯社招页面来做演示:http://hr.ten ...
- RandomAccessFile详解
此类的实例支持对随机访问文件的读取和写入.随机访问文件的行为类似存储在文件系统中的一个大型 byte 数组.存在指向该隐含数组的光标或索引,称为文件指针:输入操作从文件指针开始读取字节,并随着对字节的 ...
- POJ 2084 Catalan数+高精度
POJ 2084 /**************************************** * author : Grant Yuan * time : 2014/10/19 15:42 * ...
- POJ 1251 Jungle Roads(最小生成树)
题意 有n个村子 输入n 然后n-1行先输入村子的序号和与该村子相连的村子数t 后面依次输入t组s和tt s为村子序号 tt为与当前村子的距离 求链接全部村子的最短路径 还是裸的最小生成树咯 ...
- Java 并发专题 : Executor具体介绍 打造基于Executor的Webserver
转载标明出处:http://blog.csdn.net/lmj623565791/article/details/26938985 继续并发,貌似并发的文章非常少有人看啊~哈~ 今天准备具体介绍jav ...
- 《程序设计实践》【PDF】下载
<程序设计实践>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196319 内容简介 本书从排错.测试.性能.可移植性.设计.界面. ...
- IntelliJ IDEA 左侧列表设置忽略文件格式
什么问题 idea 中设置忽略文件 Unity开发过程中使用Lua做逻辑开发 Unity会自动生成xx.meta文件 这种文件再使用Idea开发过程中没有用处 显示文件列表中会看着比较乱 如何设置 F ...
- NFV、DPDK以及部分用户态协议研究
本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 对我而言,这是一个新的领域,很有意思. 一.解释名词: NFV(Network Functio ...