使用 css 的导航栏边框问题

Question

在我的例子中，我有一个带有绿色边框的导航栏（两个选项卡）。在此下方有一个带有绿色边框的容器。对于活动标签 border-bottom 应该是白色的，另一个标签应该是绿色的。所以我单独为活动选项卡更改了 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 link:

https://jsfiddle.net/ktncf454/

Answer 1

您必须为此编写媒体查询 scenario.Generally 在不同设备上会发生什么导航栏会自行调整 automatically.so 编写媒体查询您可以更改容器的边框和选项卡

如果您分享您的源代码或创建一个 jsfiddle 就更好了，这样我们可以测试并为您提供合适的解决方案。

Answer 2

@padamapriya：

我为你做了一些修改..:[=11=]

.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;
}

希望对您有所帮助！！！！

使用 css 的导航栏边框问题

Nav bar border issue using css

html

css

design-patterns

navbar