不定义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. Android 开发压缩图片

    private Bitmap imageZoom(int position , Bitmap bitMap) {        //图片允许最大空间         double maxSize =2 ...

  2. mysql update某个字段替换成某个值

    UPDATE xc_admin_vehicle SET brandid= REPLACE(brandid, 19, 54) UPDATE xc_admin_models SET bid= REPLAC ...

  3. 什么是文件的BOM头,及BOM头有哪些坑?

    1.什么是BOM? BOM是用来判断文本文件是哪一种Unicode编码的标记,其本身是一个Unicode字符("\uFEFF"),位于文本文件头部. 在不同的Unicode编码中, ...

  4. 通过Spring Resource接口获取资源

    目录 1       Resource简介 2       通过ResourceLoader获取资源 3       在bean中获取Resource的方式 1       Resource简介 在S ...

  5. LED Decorative Light Supplier - Decorative Use Of LED Light Strips

    Led strip refers to the led assembly in the ribbon of the FPC (flexible circuit board) or PCB hard b ...

  6. Linux上安装nodejs

    https://github.com/nodejs/node-v0.x-archive/wiki/Installing-Node.js-via-package-manager#debian-and-u ...

  7. 一文明白所谓的CS与BS设计模式

    CS设计模式 概念:CS设计模式,C代表的是Client,S代表的是Server.正如图中的所示,是客户机与服务器之间的交互.这种交互在早期的软件系统中,大多数都是采用这种模式,通过将任务合理分配到C ...

  8. 每日扫盲:eclipse快捷键 包括查找类、方法、变量汇总

    [Ct rl+T] 搜索当前接口的实现类 1. [ALT +/]    此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ ...

  9. ServletContext的使用

    ServletContext: ServletContext表示Servlet应用程序.每个Web应用程序只有一个上下文.在将一个应用程序同时部署到多个容器的分布式环境中,每台Java虚拟机上的Web ...

  10. Laravel Vuejs 实战:开发知乎 (5)设计问题表

    1.执行命令: php artisan make:model Models/Question -cm 2.设计问题的数据库迁移文件中的字段: <?php use Illuminate\Datab ...