•   欢迎来到21NN网.
  •   请记住本站网址www.21nn.cn

如安在CSS中完成并排生成多行的dt和dd【html5教程】,CSS

摘要: 怎样运用CSS并排生成多行的dt和dd,dl·dt·dd标签是称为定义列表的元素,本篇文章将给人人分享关于在CSS中并排生成多行的dt和dd的要领。因为不转变dt元素和dd元素的compact...
怎样运用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网别的相干文章!

分享到:

发表评论

评论列表

还没有评论,快来说点什么吧~

公众号二维码

微信公众号