這個jQuery手風琴代碼有什么問題？

Question

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />   
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    </head>

    <script>
        $(document).ready(function(){
            $('#accordion').accordion();
        });
    </script>

    <body>

        <ul id="accordion">
      <li>
        <a href="#">Header 1</a>
        <div>Wow, look at all this content that can be shown or hidden with a simple click!</div>
      </li>
      <li>
        <a href="#">Header 2</a>
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpatligula. Integer  
        vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut      
        bibendum velit enim eu lectus. Suspendisse potenti. </div>
      </li>
      <li>
        <a href="#">Header 3</a>
        <div>Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis.  
        Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.</div>
      </li>
    </ul>

    </body>
</html>

此代碼返回第一個圖像，如何使其像第二個圖像？ 然而，樣式並不重要，我只希望標簽像第二張圖像一樣正確對齊

第一張圖片 - > 在此輸入圖像描述

第二張圖片 - > 在此輸入圖像描述

Answer 1

手風琴很好用。 你只需要一些CSS。

ul {
    margin: 20px;
    border: 1px solid #00f; }
li a { 
    padding: 5px;
    background: #00f; 
    color: #fff; 
    text-align: center; 
    display: block; 
    text-decoration: none; 
    text-transform: uppercase;
    outline: none; }
 li div { padding: 20px; }

在這里演示

Answer 2

添加以下樣式，選項卡將根據需要顯示...

<style>
#accordion li {
  display:inline;
  text-decoration: none;
}
</style>

見http://jsfiddle.net/neo108/yFeuJ/

這個jQuery手風琴代碼有什么問題？

問題描述

2 個解決方案

解決方案1
2 已采納 2012-03-19 05:07:37

解決方案2
0 2012-03-19 04:56:20

這個jQuery手風琴代碼有什么問題？

問題描述

2 個解決方案

解決方案1 2 已采納 2012-03-19 05:07:37

解決方案2 0 2012-03-19 04:56:20

解決方案1
2 已采納 2012-03-19 05:07:37

解決方案2
0 2012-03-19 04:56:20