为什么我的手风琴文本与箭头重叠？

我正在尝试使用称为手风琴的jquery-ui小部件向用户显示两段文本。正如你在截图中看到的那样，文本与箭头重叠，我不知道为什么。为什么我的手风琴文本与箭头重叠？

Screenshot

这里是我的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中：

<!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>

而且，我无法改变的标题文字的大小。我想这在我的main.css，但它不工作，只是字体的变化，而不是大小：

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

来源

2011-10-11 satur9nine

我讨厌成为那个人，但是你能把它扔进JFiddle兄弟吗？ –

尝试添加一些填充 - 左h3 –

检查javascripts的加载顺序，我有一个项目的headackes我在rails 3中的一个项目时，如果一个jquery元素工作，那么第二个不是，然后第二个工作的第一个不是......所以通过玩js文件，我意识到js的加载顺序很重要。正确的顺序应该是jquery 1.4.4, jquery-ui-1.8.16.custom.min.js - 顺便说一下，使用最新的jQuery也使我的问题，我采取了1.4.4现在evertyhing工作正常。 – rmagnum2002

詹尼斯Lankovskis在评论中回答了这个问题。解决方案是在CSS中执行此操作：

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

来源

2013-07-18 19:18:13 satur9nine

为什么我的手风琴文本与箭头重叠？

回答

相关问题