主页 / 问题 / 1439395
Accepted
TinturSoft
Asked:2022-08-15 15:30:11 +0000 UTC2022-08-15 15:30:11 +0000 UTC

对齐两个边框

  • 772

底线是我正在做一个标签切换器，最后我需要做这样的事情

在此处输入图像描述

我决定用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>

最后事实证明

在此处输入图像描述

无论我如何尝试调平它，它都不起作用。告诉我，也许这原本是一个疯狂的想法？

html css

2 个回答

  1. 添加.js-tab属性margin-bottom: -2px;

    如果需要的话padding-bottom: 2px

    • 3
  2. Best Answer

    您可以为导航元素提供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>

    或者通过绝对定位的伪元素制作底部边框（但那是更多额外的代码）

    • 2

相关问题