jquery无法正常显示效果

主页面：<html>
  <head>
   <title></title>
   <link rel="stylesheet" href="jquery.css" type="text/css" media="screen"/>
   <script src="jquery.js" type="text/javascript">
   $(document).ready(function(){
     $('#selected-plays > li').addClass('horizontal');
   });
   </script>
  </head>
  <body>
<ul id="selected-plays">
<!--Comedies-->
  <li>Comedies
   <ul>
   <li>walkman</li>
   <li>sony</li>
   </ul>
  </li>
<!--Tragedies-->
  <li>Tragedies
   <ul>
   <li>romio</li>
   <li>julie</li>
   </ul>
  </li>
  <!--Histories-->
  <li>Histories
   <ul>
   <li>Part I</li>
   <li>Part II</li>
   </ul>
  </li>   
</ul>
  </body>
</html>
需要用的css文件.horizontal {
float: left;
list-style: none;
margin: 10px;
}
需要用Jquery实现几个有序列表的横向排列，但效果显示不出来。
请大神指点一二，刚开始学Jquery。

解决方案 »

  1.   

    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
              $(document).ready(function(){
                $('#selected-plays > li').addClass('horizontal');
          });
    </script>
    要分开
      

  2.   

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
       $('#selected-plays > li').addClass('horizontal');
       });
    </script>
    引用是引用。。自己写的是自己写的。。要弄清楚不要混为一潭
      

  3.   

    <script    src="jquery.js" type="text/javascript">
              $(document).ready(function(){
                $('#selected-plays > li').addClass('horizontal');
          });
          </script>应该分开
    <script    src="jquery.js" type="text/javascript"> </script>
    <script  type="text/javascript">
    $(document).ready(function(){
                $('#selected-plays > li').addClass('horizontal');
          });
          </script>
      

  4.   

          <script    src="jquery.js" type="text/javascript">
              $(document).ready(function(){
                $('#selected-plays > li').addClass('horizontal');
          });
          </script>
    估计LZ的本意是想省写一行代码，呵呵！