用定义列表定义一段文字justify

最新推荐文章于 2020-11-06 11:26:13 发布

墨墨博客

最新推荐文章于 2020-11-06 11:26:13 发布

阅读量463

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 less 文章标签： html5 html css

本文链接：https://blog.youkuaiyun.com/wangweiscsdn/article/details/53897683

html5 同时被 2 个专栏收录

30 篇文章

订阅专栏

less

4 篇文章

订阅专栏

本文详细介绍了一种使用HTML和LESS进行网页布局的方法，并通过具体的示例代码展示了如何设置字体大小、颜色、文本对齐方式等属性来实现预期的文字布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现以下效果：

1、这是一大段文字这是一大段文字这是一。
2、这是一大段文字这是一大段文字这是一

大段文字这是一大段文字这是一大段文

字这是一大段文字这是一大段文字这是
一大段文字这是一
3、一大段文字这是一大段文字这是一大段

文字这是一大段文字这是一大段文字这

是一大段文字这是一大段文字这是一大

段文字这是一大段文字这是一大段文字

这是一大段文字这是一大段文字这是一

大段文字
4、文字这是一大段文字这是一大段文字这

是一大段文字这是一大段文字这是一大

段文字这是一大段文字这是一大段文字

这是一大段文字这是一大段文字这是一

大段文字这是一大段文字这是一大段文

字这是一大段文字这是一大段文字这是

一大段文字这是一大段文字

html代码如下：

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  </head>
  <body>
    <div class="Container">
      <div class="ActiveRules">
        <dl><span></span>
          <dt><span>1、</span></dt>
          <dd> 这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是

一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是

一大段文字这是一大段文字这是一大段文字这是一大段文字
</dd>
        </dl>
        <dl><span></span>
          <dt><span>2、</span></dt>
          <dd> 这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是

一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是

一大段文字这是一大段文字这是一大段文字这是一大段文字

</dd> </dl> </div> </div> </body></html>

less代码如下：

.ActiveRules{
		font-size:30px;
		color:#666;
		text-align:left;
		line-height:66px;
		padding-left:25px;
		padding-right:25px;
		dt{
			position:absolute;
		}
		dd{
			text-align: justify;
			padding-left:50px;
			
		}
   }