这个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