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

다시이 사이트를 검색했지만이 코드와 함께 가장 간단한 형식으로 나중에 참조 할 때 도움이 될 것이라고 생각했습니다.

Answer 1

border:none;이 아닌 border:0;을 사용하여 문제가 해결 될 것 같습니다.
이 같은 것을 사용해보십시오 :

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

또는 다음과 같이 :이이 UI - 위젯 콘텐츠를 모든 객체에 영향을

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

Working Example