使用flex的自定义选项卡菜单

Question

我正在尝试通过一些CSS修改来制作自定义选项卡式菜单，我想做这样的事情：

我能够使用display flex创建非常接近的东西：

HTML：

$('#my-select').select2({
    theme: "bootstrap myCssClass",
});

CSS：

<div class="mod-mini-menu">
   <ul>
      <li class="active">
         <a href="#">Active</a>       
      </li>
      <li>
         <hr class="verticalLine" />
      </li>
      <li>
         <a href="#">Inactive</a>      
      </li>
   </ul>
</div>

这种方法存在一些问题，首先，我想在每个li元素之间进行分隔，我不知道如何以更简单的方式进行此操作，因此我想到的是设置一个小时在每个2 li元素之间，我知道这不是最好的解决方案，但是我不知道有更好的方法，我如何才能使其正确？

另一件事是我无法使文本在每个分隔中居中，我试图在li元素上设置文本对齐，但是什么也没有。

最后，我的目标是使此自定义标签适应内部元素，例如：

使自己适应父div的with。

这是上面代码的CodePen。

有人可以指导我吗？ 谢谢。

Answer 1

选项1： 您不需要hr标记。您可以在border-left标记上设置li，但第一个li除外。

下面的CSS可以帮助您实现这一目标。

.mod-mini-menu li:not(:first-child) {
    border-left: 1px solid hsla(200, 10%, 50%, 100);
}

选中此codepen

选项2： 如果您只希望使用hr的解决方案，则可以在:nth-child(odd) CSS之后的li处添加宽度设置（100％）。

.mod-mini-menu li:nth-child(odd) {
    float: left;
    width: 100%
}

您可以here

检查它