divider是用于区隔内容的分割线，一般用于对不同章节的文本段落进行分割。

依赖项

• styles/divider.css

使用方法

divider使用div进行构建，为了实现在分割线上面显示文字，这里使用了比较复杂的HTML结构。

<!-- 没有文本 -->
<div class="divider">
    <div class="line"></div>
</div>

<!-- 文本居中 -->
<div class="divider">
    <div class="line"></div>
    <div class="text-center"><span>中间</span></div>
</div>

<!-- 文本在左边 -->
<div class="divider">
    <div class="line"></div>
    <div class="text-left"><span>左边</span></div>
</div>

<!-- 文本在右边 -->
<div class="divider">
    <div class="line"></div>
    <div class="text-right"><span>右边</span></div>
</div>

divider的根元素为div，class属性需要设置为divider。其内部包含两个子元素：

• line - 用于绘制分割线本身
• text - 用于文本显示，可选class项有：
  • text-left - 文本靠左边
  • text-right - 文本靠右边
  • text-center - 文本居中

在文本内部，可以是你自己的html结构，示例使用了span。对于文本内部的span，设置了左右空白和背景颜色，以使视觉效果更加和谐。

你也可以为你的span设置自己的样式，如文本颜色。

如果你不需要显示文本，也可以省略文本相关的HTML结构。

效果预览