不定义css样式时(默认情况):

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<dl>
<dt>hello</dt>
<dd>xiaohao</dd>
</dl>
</body>
</html>

运行结果如下:

方法一:

1.设置全局样式

*{

margin:0;

}

方法二:

2.给dd设置样式

dd{

margin:0;

}

设置css样式后:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title> <style>
dd{
margin: 0px;
}
</style> </head>
<body>
<dl>
<dt>hello</dt>
<dd>xiaohao</dd>
</dl>
</body>
</html>

运行结果为:

ul与li对齐方法类似,ul存在内边距,设置ul的内边距为0,即可实现ul与li对齐。

注:

设置dt{float:left;}可以让dd,dt在同一行显示;

定义列表dl中标签 dt 与标签dd对齐方法,标签ul与标签li对齐的更多相关文章

  1. 前端 HTML body标签相关内容 常用标签 定义列表<dl>

    定义列表<dl> 定义列表的作用非常大. <dl>英文单词:definition list,没有属性.dl的子元素只能是dt和dd. <dt>:definition ...

  2. 有序列表ol,无序列表ul,定义列表dl

    ====================非常重要=================无序列表ul中有一个type属性四个属性值type="disc" 实心圆点(默认) type=&q ...

  3. 有序列表ol和定义列表dl,dt,dd

    有序列表是一种讲究排序列表结构,使用<ol>标签定义,其中包含多个<li>列表项目.一般网页设计中,列表结构可以互用有序或者无序类表标签.但是,在强调项目排序栏目中,选用有序列 ...

  4. css中实现ul两端的li对齐外面边缘

    其实就是设置ul的宽度大一些就好

  5. 前端学习 -- Css -- 定义列表

    定义列表用来对一些词汇或内容进行定义 使用dl来创建一个定义列表 dl中有两个子标签 dt : 被定义的内容 dd : 对定义内容的描述 同样dl和ul和ol之间都可以互相嵌套 <!DOCTYP ...

  6. HTML 有序、无序和定义列表

    无序列表 <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> 咖 ...

  7. maven的setting.xml文件中只配置本地仓库路径的方法

    maven的setting.xml文件中只配置本地仓库路径的方法 即:settings标签下只有一个 localRepository标签,其他全部注释掉即可 <?xml version=&quo ...

  8. 如何用PC标签在列表页中调出文章内容 phpcms

    如何用PC标签在列表页中调出文章内容 phpcms v9 moreinfo=”"参数说明 {pc:content action="lists" catid="$ ...

  9. 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变量。

    最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...

随机推荐

  1. 12c的PDB创建DIRECTORY要注意与PATH_PREFIX的关系(ORA-65254)

    在创建PDB过程中如果使用了带PATH_PREFIX的参数,意味着在创建DIRECTORY目录时需要指定相对路径,而不能指定其它绝对路径.来自博客园AskScuti 11g整库作为一个PDB迁移至阿里 ...

  2. DM9000C网卡驱动程序编写与测试

    一般网卡驱动程序厂商会给我们提供一份模板驱动,我们的工作就是需要根据自己的需要更改这个模板驱动 1.DM9000C的硬件连接 硬件连接图如下所示:它接在S3C2440的BANK4内存控制器上,它只占用 ...

  3. 实用 SQL 语句

    1. 创建 1.1 创建数据库 语法:create database db_name 示例:创建应用数据库 awesome_app sqlcreate database `awesome_app` 复 ...

  4. Harmonic Number (II) 数学找规律

    I was trying to solve problem '1234 - Harmonic Number', I wrote the following code long long H( int  ...

  5. 第三十篇 玩转数据结构——字典树(Trie)

          1.. Trie通常被称为"字典树"或"前缀树" Trie的形象化描述如下图: Trie的优势和适用场景 2.. 实现Trie 实现Trie的业务无 ...

  6. Java中怎么把科学计数法显示出全部数字

    如果想去除科学计数法显示可以用如下方法处理: /** * 把科学计数法显示出全部数字 * @param d */ public static String object2Str(Object d) { ...

  7. python基于百度AI开发文字识别

    很多场景都会用到文字识别,比如app或者网站里都会上传身份证等证件以及财务系统识别报销证件等等 第一步,你需要去百度AI里去注册一个账号,然后新建一个文字识别的应用 然后你将得到一个API Key 和 ...

  8. 使用ResponseBodyAdvice统一包装响应返回String的时候出现java.lang.ClassCastException: com.xxx.dto.common.ResponseResult cannot be cast to java.lang.String

    代码如下: @Override public ResponseResult<Object> beforeBodyWrite(Object returnValue, MethodParame ...

  9. resize2fs: 报错

    报错如下 [root@localhost ~]# resize2fs /dev/mapper/centos-root resize2fs (-Dec-) resize2fs: Bad magic nu ...

  10. vue工程 使用滚动组件 vue2-better-scroll 实现上拉加载 下拉刷新

    vue2-better-scroll 关于具体安装&使用过程 请移步api文档 已经很详细了 而且超清晰明了. https://cnpmjs.org/package/vue2-better-s ...