Выровнять два border

Question

Суть в том, что я делаю переключалку табов, и нужно сделать в итоге что то типо такого

Я решил сделать всё это дело с помощью border-bottom.

Вот пример:

    .item_tabs_new {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .r-tabs-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        margin-top: 0px !important;
        margin-left: 0px;
        border-bottom: 2px solid #EBEBEB;
    }
    
    .js-tab {
        color: #222;
        border-top: 11px solid transparent;
        margin: 0px 15px 0px 0px;
        padding-left: 0px;
        margin-right: 25px !important;
    }
    .product-tabs__link {
        font-weight: 200;
        font-size: 18px;
        line-height: 22px;
        transition: border-top-color .15s,color .15s;
        color: #000;
        text-decoration: none;
        border-top: 11px solid transparent;
    }
    .js-tab.active {
        color: #AD7DB7;
        border-bottom: 2px solid #AD7DB7;
    }

    <div class="item_tabs_new">
          <ul class="r-tabs-nav">
            <li data-tab="item_tab_1" class="js-tab">
              <span class="r-tabs-anchor  product-tabs__link">Описание</span>
            </li>
            <li data-tab="item_tab_2" class="js-tab">
              <span class="r-tabs-anchor  product-tabs__link">Показания к назначению</span>
            </li>
            <li data-tab="item_tab_3" class="js-tab active">
              <span class="r-tabs-anchor  product-tabs__link">Интерпретация результата</span>
            </li>
          </ul>
          <div class="tabs_block animate-block">
            <div id="item_tab_1" class="tab_blocs">
             
          </div>
        </div>
    </div>

И в итоге получается вот

Как бы я не пытался выровнять, никак не получается. Скажите, может это вообще изначально была бредовая идея?

Answer 1

Вы можете задать элементам навигации js-tab относительное позиционирование и сдвинуть их вниз на пару пикселей - тогда визуально всё будет как надо:

    .item_tabs_new {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .r-tabs-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        margin-top: 0px !important;
        margin-left: 0px;
        border-bottom: 2px solid #EBEBEB;
    }
    
    .js-tab {
        color: #222;
        border-top: 11px solid transparent;
        margin: 0px 15px 0px 0px;
        padding-left: 0px;
        margin-right: 25px !important;
        /* здесь добавленные стили */
        position: relative;
        bottom: -2px;
    }
    .product-tabs__link {
        font-weight: 200;
        font-size: 18px;
        line-height: 22px;
        transition: border-top-color .15s,color .15s;
        color: #000;
        text-decoration: none;
        border-top: 11px solid transparent;
    }
    .js-tab.active {
        color: #AD7DB7;
        border-bottom: 2px solid #AD7DB7;
    }

    <div class="item_tabs_new">
          <ul class="r-tabs-nav">
            <li data-tab="item_tab_1" class="js-tab">
              <span class="r-tabs-anchor  product-tabs__link">Описание</span>
            </li>
            <li data-tab="item_tab_2" class="js-tab">
              <span class="r-tabs-anchor  product-tabs__link">Показания к назначению</span>
            </li>
            <li data-tab="item_tab_3" class="js-tab active">
              <span class="r-tabs-anchor  product-tabs__link">Интерпретация результата</span>
            </li>
          </ul>
          <div class="tabs_block animate-block">
            <div id="item_tab_1" class="tab_blocs">
             
          </div>
        </div>
    </div>

Либо же сделать нижнюю границу через псевдоэлемент с абсолютным позиционированием (но это больше дополнительного кода)

Answer 2

Добавьте .js-tab свойство margin-bottom: -2px;

И если понадобится то padding-bottom: 2px

БЛОГ НА HUSL

Выровнять два border

Ответы (2 шт):