Question

我正在尝试在客户端上创建一个极简主义选项卡。我想要做的是删除选项卡周围的所有边框。出于某种原因，边界不断出现。

以下是我在网站上展示问题的示例这是链接：http://www.suttonst.com/govt-dev/

这是我的CSS代码：

.ui-tabs { 
    background: transparent; 
    border: none; 
} 
.ui-tabs .ui-tabs-panel { 
    background: transparent; 
    border: none; 
    font-family: "Georgia";
    font-size: 13px;
    color: #777777 
} 
.ui-tabs .ui-widget-content { 
    border: none;
}
.ui-tabs .ui-widget-header { 
    background: transparent; 
    border: none; 
    border-bottom: 1px solid #006b54; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px;
    font-family: "Varela Round";
    text-transform: uppercase;
} 
.ui-tabs .ui-tabs-nav .ui-state-default { 
    background: transparent; 
    border: none; 
} 
.ui-tabs .ui-tabs-nav .ui-state-active { 
   background: transparent    url(http://static.squarespace.com/static/51c0eec0e4b0c90d8d52ac7c/t/528ffa03e4b023ca755e496d/1385167363225/uiTabsArrowLogoEmeraldGreen.png) no-repeat bottom center; 
    border: none; 
} 
.ui-tabs .ui-tabs-nav .ui-state-default a { 
    color: #006b54; 
} 
.ui-tabs .ui-tabs-nav .ui-state-active a { 
    color: #cc6a30; 
    font-weight: bold;
}

请帮忙。

Answer 1

从ui-widget-content移除边框，您在第三次尝试时接近但没有空格：

.ui-tabs.ui-widget-content {
    border: none;
}

或如果您想要非常具体，请使用#tabs

Answer 2

看起来像CSS specificity问题尝试

#tabs {
    border: none;
}

或

.tabs.ui-corner-all{
    border: none;
}

Answer 3

尝试覆盖此行，

.ui-tabs .ui-tabs-nav li {
 border:none;
}

它对我有用。

Answer 4

尝试

.ui-corner-all {
    border: 0;
}

从jQuery选项卡中删除边框

4 个答案: