jQuery-ui删除底部边框

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

即使是“底部边框：无”行，我不断收到一个边界。无论我放在哪里。 我甚至试过 .ui-widget-content {0} {0} {0}} border：none; }

同样，我确实搜索过这个网站，但我想通过这种最简单的形式询问它，这个代码应该有助于未来的参考。

Answer 1

我认为你的问题将通过使用border:0;而不是border:none;来解决。
尝试使用这样的事情：

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

或像这样：

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

Working Example