时间戳

首页 > 解决方案 > 如何为边框底部设置CSS

html - 如何为边框底部设置CSS

问题描述

问题是

.sppb-nav-tabs {
        border-bottom: 1px solid #e5e5e5}

在我的 CSS 中工作不正确。我将 CSS 的这一部分用于我网页上的选项卡，我希望它们看起来像现在一样。但是，当您在选项卡之间切换时，例如从选项卡 1 转到选项卡 2，border-bottom: 1px solid #e5e5e5在您单击内容上的某个位置之前，所选选项卡下仍然存在。只有在单击选项卡外部的某个位置后才会生效border-bottom-color: transparent;。我尝试了不同的解决方案，但没有成功。只有通过删除border-bottom: 1px solid #e5e5e5问题才能得到解决，但是根本没有线。有什么想法可以解决这个问题吗？

.sppb-nav-tabs {
    border-bottom: 1px solid #e5e5e5}
.sppb-tab-content {
    margin-top: 15px}
.sppb-nav-tabs-content {
    margin-top: 0;
    border-left: 1px solid #e5e5e5;
    background: #fff;
    border-top: 0;
    padding: 15px}
.sppb-nav-tabs>li {
    float: left;
    margin-bottom: -1px}
.sppb-nav-tabs>li>a {
    font-size: 14px;
    font-weight: bolder;
    line-height: 1.42857143;
    padding: 12px 15px;
    background: #f5f5f5;
    color: inherit;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    border-right-width: 1px}
.sppb-nav-tabs>li: last-child>a {
    border-right-width: 1px}
.sppb-nav-tabs>li>a>i {
    margin-right: 5px}
.sppb-nav-tabs>li.active>a,.sppb-nav-tabs>li.active>a:focus,.sppb-nav-tabs>li.active>a:hover {
    color: inherit;
    background-color: #fff;
    border-bottom-color: transparent;
    cursor: default}

标签： htmlcss

解决方案

在 template.css 的第 3609 行检查您的 :active 状态。当锚点被点击时，它被赋予了一些重要的数据。在 chrome 开发人员工具中，尝试打开锚的活动状态，以查看在此状态下影响它的值。

.next .pager a, a:hover, a:focus, a:active {
    text-decoration: none;
    background-color: transparent !important;
}

推荐阅读