如何去除Semantic UI无文本垂直分隔符的预留间距？

嗨，我懂你的困扰——Semantic UI的垂直分隔符默认会为文本预留左右间距，哪怕你没加文本，这个空间也会顽固存在，确实有点闹心。

其实原因很直白：.ui.vertical.divider这个类的默认样式里自带了padding-left和padding-right属性，就是用来给可能的文本内容腾地方的。要去掉这个多余间距，直接覆盖这些样式就行，给你两种实用的方案：

方案1：自定义类（适合多个分隔符复用） #

先写一段自定义CSS，给无文本的分隔符单独设置样式：

/* 自定义无文本垂直分隔符样式 */
.ui.vertical.divider.no-text-divider {
  padding-left: 0;
  padding-right: 0;
  /* 如果还有多余的margin，也可以一起去掉 */
  margin-left: 0;
  margin-right: 0;
}

然后在HTML里给分隔符加上这个自定义类：

<div class="ui vertical divider no-text-divider" style="left:87.5%"></div>

方案2：内联样式（适合单个分隔符快速修改） #

如果只是个别分隔符需要调整，直接在style属性里添加padding的设置就行，不用额外写CSS：

<div class="ui vertical divider" style="left:87.5%; padding-left: 0; padding-right: 0;"></div>

额外提醒 #

如果修改后分隔符的边框显示异常（比如太窄或者位置不对），可以再调整边框的样式，匹配Semantic UI的默认风格：

.ui.vertical.divider.no-text-divider {
  padding-left: 0;
  padding-right: 0;
  border-left: 1px solid rgba(0,0,0,0.15); /* 对齐默认边框样式 */
}

这样就能完美去掉无文本垂直分隔符的多余预留间距啦！

内容的提问来源于stack exchange，提问作者Darkstarone