Question

在我的情况下，我有一个带绿色边框的导航栏（两个标签）。在这下面有一个带绿色边框的容器。对于活动选项卡边框 - 底部应为白色，另一个选项卡应为绿色。所以我更改了border-bottom：1px solid #fff仅用于活动标签。这种情况工作正常是大中型设备。但是在小型设备中，绿线仍然显示在活动标签下，该标签是导航下存在的容器的边界。

HTML代码：

    .tab-links:after {
    display:block;
    clear:both;
    content:'';
    }
.tab-links li {
    margin:3px;
    float:left;
    list-style:none;
    }
.tab-links a {
    background:none repeat scroll 0 0 #dfdfdf;
    border:1px solid #c3c3c3;
    color:#484e2a;
    display:inline-block;
    font-family:open_sansbold;
    font-size:11px;
    min-width:166px;
    padding:8px 4px;
    text-decoration:none;
    transition:all .15s linear 0s;
    }
.tab-links a:hover {
    background:#a7cce5;
    text-decoration:none;
    }
li.active a, li.active a:hover {
    background: #fff;
    border:1px solid #dddfb0;
    border-bottom:1px solid #fff;
    color:#484e2a;
    }
.tab-content {
    padding:15px;
    background:#fff;
    border:1px solid #dddfb0;
    margin-top:-20px;
    }
.tab {
    display:none;
    }
.tab.active {
    display:block;
    }

<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
    </ul>
</div>

<div class="tab-content">
    <div id="tab1" class="tab active">
      <p>Test Content 1</p>
    </div>

    <div id="tab2" class="tab">
      <p>Test Content 2</p>
    </div>
</div>

JS Fiddler链接：

https://jsfiddle.net/ktncf454/

Answer 1

@padamapriya：

我为你做了一些修改......：

.tab-links li {
    margin: 3px;
    float: left;
    list-style: none;
    position: relative;
    z-index: 1;
    margin-bottom: 2px;
}

.tab-content {
    padding: 15px;
    background: #fff;
    border: 1px solid #dddfb0;
    margin-top: -20px;
    position: relative;
    z-index: 0;
}

希望这有助于!!!!

Answer 2

您必须为此场景编写媒体查询。一般情况下，导航栏会自动调整自己的不同设备。在编写媒体查询后，您可以更改容器和选项卡的边框。

如果您共享源代码或创建一个jsfiddle，那么我们可以测试并为您提供正确的解决方案。

使用css导航栏边框问题

2 个答案: