章节
问答
课签
笔记
评论
占位
占位

列表--水平定义列表

水平定义列表就像内联列表一样,Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
/*源码请查看bootstrap.css文件第608行~第621行*/

@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时,将会显示三个省略号

其用法如下:

<dl class="dl-horizontal">
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任,不断活跃在行业技术最前沿,努力提供高质量前端技术博文</dd>
    <dt>慕课网</dt>
    <dd>一个专业的,真心实意在做培训的网站</dd>
    <dt>我来测试一个标题,我来测试一个标题</dt>
    <dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果</dd>
</dl>


宽屏下的效果(屏幕大于768px):

当你缩小你的浏览器屏幕时,水平定义列表将回复到原始的状态。

注:结果可以在最右侧结果窗口中看到(鼠标滑过结果窗口时会出现“全屏”按钮)

任务

我也来试试:完成下面任务

在HTML编辑第19行输入正确代码,实现下图的水平定义列表的效果:

备注:这一小节没有正确性验证,请查看结果窗口与任务所给的结果图片是否一致,从而判断输入代码是否正确。

?不会了怎么办

参考代码:

<dl class="dl-horizontal">
     <dt>标题一:</dt>
     <dd>描述内容</dd>
     <dt>标题二:</dt>
     <dd>描述内容</dd>
</dl>
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?