semantic-ui 分割线

时间:2023-03-08 22:30:37
semantic-ui 分割线

  分割线即原生html中的<hr>标签。不过semantic-ui中将<hr>美化了一下下。

1、基础分割线

  需要注意的是分割线只能使用div标签和p标签,不能使用span标签。

<div class="ui divider"></div>
<p class="ui divider"></p>

  semantic-ui 分割线

2、定义水平线

  经常看到水平线的中间有文字,其实可以使用下面代码实现,但是要注意class中加horizontal,并且要在水平线中间显示的文字写在中间即可。

<div class="ui horizontal divider">or</div>
<p class="ui horizontal divider">center</p>
<div class="ui horizontal divider">end</div>

semantic-ui 分割线

3、定义竖线

<div class="ui vertical divider">or</div>

  semantic-ui 分割线