博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
dt dl列表布局
阅读量:5315 次
发布时间:2019-06-14

本文共 781 字,大约阅读时间需要 2 分钟。

项目需要中

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

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

开始想到使用 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

 

转载于:https://www.cnblogs.com/leshao/p/5364487.html

你可能感兴趣的文章
软件开发技术
查看>>
线上问题随笔记录数据库连接池问题
查看>>
Window对象
查看>>
简单计算题:填词
查看>>
BZOJ 3231: [Sdoi2008]递归数列 (JZYZOJ 1353) 矩阵快速幂
查看>>
网页固定宽度布局
查看>>
二、通过工厂方法来配置bean
查看>>
特殊的求和(函数和循环)
查看>>
协变和逆变
查看>>
编写高质量代码:改善Java的151个建议四(基本类型)21-30
查看>>
Reptile:requests + Xpath 爬取段子网的段子
查看>>
angry ip scanner
查看>>
【转】R语言 RStudio快捷键
查看>>
Shell字符串
查看>>
jQuery选择器
查看>>
luogu 1484\1792 种树 奇怪的贪心可反悔
查看>>
visual studio toolbox 修复
查看>>
Oracle-逻辑体系结构
查看>>
Java多线程
查看>>
Sql—表格的建立,删除,数据的建立与删除-总结篇
查看>>