jQuery-ui удаление нижней границы

Question

Я просто создал простой контейнер для 2 вкладок с использованием jQuery UI, и все, что я хочу сделать, это удалить границу, которая появляется под ней. Я много раз пытался использовать информацию из похожих вопросов, все равно ничего. Вот код используется:

<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 { border: none; }

Опять же, я искал этот сайт, но я решил расспросить об этом в его самой простой форме, такой как этот код, который должен быть полезен для будущих ссылок.

Answer 1

Я думаю, что ваша проблема будет решена с использованием border:0;, а не border:none;.
Попробуйте использовать что-то вроде этого:

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

или как это:

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

Working Example