bootstrap 列表--水平定义列表

水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

@media (min-width: 768px) {.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;}
.dl-horizontal dd {margin-left: 180px;}
}

只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式：
1、将dt设置了一个左浮动，并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px，达到水平的效果
3、当标题宽度超过160px时，将会显示三个省略号

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>水平定义列表</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head><body>
<dl class="dl-horizontal"><dt>W3cplus</dt><dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd><dt>我来测试一个标题，我来测试一个标题</dt><dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
</dl>
<!--下面是代码任务部分-->
<dl class="dl-horizontal"><dt>标题一：</dt><dd>描述内容</dd><dt>标题二：</dt><dd>描述内容</dd>
</dl></body>
</html>

转载于:https://www.cnblogs.com/Harold-Hua/p/5371502.html

bootstrap 列表--水平定义列表相关推荐

HTML标签的基本使用：无序列表、有序列表、定义列表
无序列表.有序列表.定义列表列表是由一组标签组成一.无序列表没有顺序的列表结构由ul和li标签组成 ul:unordered list(无序列表) li:list item(列表项) < ...
有序列表、无序列表、定义列表
有序列表.无序列表.定义列表三种列表标签和语义标签语义 <u1></u1> 无序列表 <o1></o1> 有序列表 <d1></ ...
html列表--有序列表、无序列表、定义列表
1.有序列表有序列表,顾名思义就是一个有顺序的列表 ol(ordered lists) : 有序列表 li(list item): 列表项目这是一个最普通的有序列表: 有序列表中两个常用的属性:t ...
html 有序无序列表,无序列表、有序列表和定义列表
一.html无序列表无序列表是一个没有顺序的列表项目,在各条列前面使用●□◇◆等符号以示区隔. html无序列表始于标签.每个列表项始于 :无序列表的type属性有三个数值可选,这三个选项分别为: ...
html5无序列表，有序列表，定义列表，组合标签，div分区标签
<!DOCTYPE html > <html lang="en"> <head><meta charset="UTF-8&quo ...
〖大前端 - 基础入门三大核心之 html 篇⑨〗- 有序列表与定义列表
当前子专栏基础入门三大核心篇是免费开放阶段.推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加 ...
定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
【python】列表的定义与操作
1. 列表的定义列表就是一系列数据的顺序组合,并且组合之后可以修改,是一种使用最频繁的数据类型标识符:[] 关键字:list 元素:多个元素,元素数据类型可以学习的所有的数据类型,元素与元素之间用 ...
html无序站点,html有序无序定义列表详解（案例介绍）
在前面小编已经把html中有序列表.无序列表及定义列表通过单独案例的方式进行讲解,而今天我们来绘制一个将有序无序和自定义结合在一起的案例,方便大家以后在实习过程能运用自如html列表.先来看看效果展示 ...

bootstrap 列表--水平定义列表

bootstrap 列表--水平定义列表相关推荐

最新文章

热门文章