Пользовательское меню вкладок с использованием flex

Question

Я пытаюсь создать пользовательское меню с вкладками с некоторыми изменениями CSS, я хочу сделать что-то вроде этого:

Я смогчтобы создать что-то очень близкое с помощью display flex:

HTML:

<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>

CSS:

.mod-mini-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #272727;
    border-radius: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mod-mini-menu li {
    float: left;
    width: 100%
}

.mod-mini-menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    font-size: 1.1rem;
}

.mod-mini-menu .active a {
    color: #4CAF50;
}

.verticalLine {
    border: none;
    border-left: 1px solid hsla(200, 10%, 50%, 100);
    height: 70%;
    width: 1px;
}

Есть проблемы с этим подходом, во-первых, я хочу сделатьразделение между каждым элементом li, я не знаю, как сделать это проще, поэтому я решил установить hr между каждыми двумя элементами li, я знаю, что это не лучшее решение для этогоно я не знал лучшего способа, как я мог сделать это правильно?

Другое дело, что я не могу центрировать текст в каждом разделении, я пытался установить выравнивание текста по элементам li, но ничего.

Моя цель в конце днясделать эту настраиваемую вкладку соответствующей элементам внутри, например:

Адаптируясь к родительскому элементу div.

Это 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) после li css, где вы устанавливаете ширину (100%).

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

Вы можете проверить это здесь