Question

我刚刚使用jQuery UI为2个标签创建了一个简单的容器，我现在要做的就是删除它下面出现的边框。我曾尝试多次使用类似问题的信息，但仍然没有。这是使用的代码：

<script>
$(function () {
    $("#Tabs").tabs();
});
</script>

<div class="Tabs" id="Tabs">
    <ul>
        <li><a href="#Tabs-1">Background</a></li>
        <li><a href="#Tabs-2">Contact Info</a></li>
        <li><a href="#Tabs-3">Photos</a></li>
    </ul>
    <div class="tabContent">

        <div id="Tabs-1">
           Some content
        </div>

        <div id="bgTabs-2">
           Some content
        </div>

    </div>
</div>

正在使用的CSS：

div.Tabs {
height: auto;
width: 625px;
font-size: 18px;
font-weight: bold;

}

.Tabs ul {
margin: 0px;
padding: 0px;
list-style-type: none;
cursor: pointer;
}

.Tabs ul li {
    position: relative;
    display: inline;
    text-align: center;
}

    .Tabs ul li a {
        padding: 0px 15px;
        text-decoration: none;
        text-decoration-color: black;
        text-decoration-style: none;
        border-bottom:none;
    }

即使使用“border-bottom：none”行，我仍然会获得边框。无论我把它放在哪里。我甚至试过了的.ui-小窗口内容{ border：none; }

同样，我确实搜索了这个网站，但我想用它来询问它是最简单的形式，例如这个代码应该对将来的参考有所帮助。

Answer 1

我认为您的问题将通过border:0;而不是border:none;来解决尝试使用这样的东西：

.ui-widget-content {
    border-bottom:0;
}

或者像这样：

.ui-widget-content {
    border:0;
}

<强> Working Example

jQuery-ui删除底部边框

1 个答案: