提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 如安在CSS中完成并排生成多行的dt和dd【css教程】,CSS

怎样运用CSS并排生成多行的dt和dd,dl·dt·dd标签是称为定义列表的元素,本篇文章将给人人分享关于在CSS中并排生成多行的dt和dd的要领。

因为不转变dt元素和dd元素的compact属性在HTML5中已过期,所以需要在CSS举行调解。

怎样完成dt和dd并排

运用<dl> <dt> <dd>“定义列表”的形貌要领

<dl> 
<dt>题目</dt> 
<dd>目次<dd> 
<dt>题目</dt> 
<dd>目次<dd> 
</dl>

像如许,一连写题目和内容,假如想把【题目】和【内容】举行横向分列的时刻,你不能像表格那样写,或许纵然你应用浮动,也没有处所能够写clearfix。

在这类情况下,运用“float:left;”和“margin - left”,能够完成一种并排的要领。

给< dt > float:left;在那里使落空高度的< dt >的部份赋予margin-left的要领。

假如是这类做法的话,纵然内容成为多行,也能够不损坏表面。

我们来看一个实例

假定你编写Web站点的更新信息,起首,让我们编写HTML。

然后,编写CSS,float-left给< dt >,< dd >里写margin-left(这里彷佛80 px摆布比较好。),

HTML

<dl>
  <dt>10月20日</dt>
  <dd>笔墨被增加<br>
  多行内容涌现</dd>
  
  <dt>10月20日</dt>
  <dd>笔墨被增加</dd>

  <dt>10月18日</dt>
  <dd>网站续订</dd>
<dl>

CSS

dt{
  float: left;
}
dd{
  margin-left: 80px;
}

结果以下:也完成了程度对齐

本篇文章到这里就完毕了,更多相干内容能够关注ki4网的CSS视频教程栏目!!!

以上就是怎样在CSS中完成并排生成多行的dt和dd的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"如安在CSS中完成并排生成多行的dt和dd【css教程】,CSS"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线