왜 내 아코디언 텍스트가 화살표와 겹치나요?

나는 accordion이라는 jquery-ui 위젯을 사용하여 두 개의 텍스트를 사용자에게 표시하려고합니다. 스크린 샷에서 볼 수 있듯이 텍스트가 화살표와 겹치고 왜 그런지 모르겠습니다.왜 내 아코디언 텍스트가 화살표와 겹치나요?

<!DOCTYPE html> 

<html> 
    <head> 
     <title>#{get 'title' /}</title> 
     <meta charset="${_response_encoding}"> 
     <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/main.css'}"> 
     <link rel="stylesheet" type="text/css" media="screen" href="@{'public/stylesheets/ui-lightness/jquery-ui-1.8.16.custom.css'}" /> 
     <link href="http://fonts.googleapis.com/css?family=Ultra|Shanti" rel="stylesheet" type="text/css"> 
     #{get 'moreStyles' /} 
     <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}"> 
     <script src="@{'/public/javascripts/jquery-1.6.4.min.js'}" type="text/javascript" charset="utf-8"></script> 
     <script src="@{'/public/javascripts/jquery-ui-1.8.16.custom.min.js'}" type="text/javascript" charset="utf-8"></script> 
     #{get 'moreScripts' /} 
    </head> 
    <body> 
     <div id="wrap"> 
      <div id="main"> 
       #{doLayout /} 
      </div> 
     </div> 
     <div id="footer"> 
      Some trifling words. 
     </div> 
    </body> 
</html>

은 또한, 나는 문제가 헤더 텍스트의 크기를 변경하는 데 문제 :

여기

#{extends 'main.html' /} 
#{set title:'Test A' /} 

<div id="accordion"> 
    <h3>Alpha</h3> 
    <div> 
     Hi! 
    </div> 

    <h3>Beta</h3> 
    <div> 
     Lo! 
    </div> 
</div> 

<script type="text/javascript" charset="utf-8"> 
    $(function() { 
     $("#accordion").accordion({ 
      autoHeight: false, 
      clearStyle: false 
     }); 
    }); 
</script>

가 main.html입니다 :

Screenshot

여기 내 HTML입니다.

h3 { 
    font-family: 'Ultra', Arial, serif; 
    font-weight: 400; 
    font-size: 20pt; 
}

출처

2011-10-11 satur9nine

나는 그 사람이 싫지만 JFiddle 형제에게 던질 수 있습니까? –

일부 패딩 왼쪽 h3 –

왼쪽 자바 스크립트의로드 순서를 확인해보십시오, 나는 레일 3 프로젝트에서 내 headackes했다면 하나의 jquery 요소가 작동하는 경우 다음 두 번째, 그리고 두 번째는 첫 번째 작업입니다 js 파일을 가지고 놀아서 js의 로딩 순서가 중요하다는 것을 깨달았습니다. 올바른 순서는 jquery 1.4.4, jquery-ui-1.8.16.custom.min.js가되어야합니다. 그리고 최신 jquery를 사용하면 문제가 발생했습니다. 1.4.4 이제는 영구히 작동합니다. – rmagnum2002

제니스 Lankovskis는 의견이 질문에 대답하지 크기 만 글꼴 변경 내 main.css가이를 시도했지만 작동하지 않습니다. 해결책은 CSS에서 수행하는 것이 었습니다.

#accordion h3 { padding-left: 100px; }

출처

2013-07-18 19:18:13 satur9nine

왜 내 아코디언 텍스트가 화살표와 겹치나요?

답변

관련 문제