以下代码为什么不能成功？用到jquery

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=GBK"/>
    <title></title>
    <script type="text/javascript" src="jquery-1.8.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#span1").left("300px");//我想要span1左边离div左边框300px的距离，但实际上span1紧贴div左边框
                                      //为什么？？？？？
        });
    </script>
</head>
<body>
<div id="div1" style="width: 500px;height: 100px;border: solid black;position: relative;">
    <span id="span1" style="position: relative;">1</span>
</div>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html>
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=GBK"/>
      <title></title>
      <script type="text/javascript" src="jquery-1.8.0.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
      $("#span1").css("left","300px");
      });
      </script>
    </head>
    <body>
    <div id="div1" style="width: 500px;height: 100px;border:1pt solid black;position: relative;">
      <span id="span1" style="position: relative;">1</span>
    </div>
    </body>
    </html>
      

  2.   

    如果span1后面还有个span2和span3，我想让它们紧挨着span1一起向右移怎么写呀？
      

  3.   

    这个是否你所想要的？<!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=GBK"/>
      <title></title>
      <script type="text/javascript" src="jquery-1.8.0.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
      $("#div2").css("left","300px");
      });
      </script>
    </head>
    <body>
    <div id="div1" style="width: 500px;height: 100px;border:1pt solid black;position: relative;">
    <div id="div2" style="position: relative;">
      <span style="position: relative;border:1pt solid black;">1</span>
      <span style="position: relative;border:1pt solid black;">2</span>
      <span style="position: relative;border:1pt solid black;">3</span>
       </div>
    </div>
    </body>
    </html>
      

  4.   

    谢谢你的耐心解答，不用第二个div没有办法吗？
      

  5.   

    那是你自己布局的问题，对你的外部div的样式加上：float:left试试吧。然后要span加起来的宽度不超过div的宽度。直白点说就是让div里面的内容水平显示就是了
      

  6.   

    <span id="span1" style="position: relative;display:inline-block;">1</span>
    span设置：
    display:inline-block
    或者display:block
      

  7.   


    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=GBK"/>
      <title></title>
      <script type="text/javascript" src="jquery-1.8.0.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
      $("#div1").find("span").each(function(){
       $(this).css("left","300px");
      });
      });
      </script>
    </head>
    <body>
    <div id="div1" style="width: 500px;height: 100px;border:1pt solid black;position: relative;">
      <span id="span1" style="position: relative;border:1pt solid black;">1</span>
      <span id="span2" style="position: relative;border:1pt solid black;">2</span>
      <span id="span3" style="position: relative;border:1pt solid black;">3</span>
    </div>
    </body>
    </html>
      

  8.   

    还是不行啊，只有span1向右移动了300px，span2和span3还是在原位置
      

  9.   

    lz关键问题是  html css不熟悉
      

  10.   

    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <title></title>
       <script type="text/javascript" src="jquery-1.8.2.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
        $("#span1").css("margin-left","300px");//注意：设置的是 margin-left
      });
      </script>
    </head>
    <body>
    <div id="div1" style="width:500px;height:100px;border:1pt solid black;">
      <span id="span1" style="border:1px solid #bfbfbf;">1</span>
      <span id="span2" style="border:1px solid #bfbfbf;">2</span>
      <span id="span3" style="border:1px solid #bfbfbf;">3</span>
    </div>
    </body>
    </html>