span的小问题

来源：互联网发布：淘宝网上买东西流程编辑：程序博客网时间：2024/06/14 01:19
<!DOCTYPE html><html><head lang="en">    <title>Matrix Admin</title>    <meta charset="UTF-8"/>    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>    <link rel="stylesheet" href="../css/bootstrap.min.css"/>    <link rel="stylesheet" href="../css/bootstrap-responsive.min.css"/>    <link rel="stylesheet" href="../css/matrix-login.css"/>    <link href="../font-awesome/css/font-awesome.css" rel="stylesheet"/>    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'></head><body><div id="loginbox">    <form id="loginform" class="form-vertical" action="index.html">        <div class="control-group normal_text">            <h3>                <img src="img/logo.png" alt="Log"/>            </h3>        </div>        <div class="control-group">            <div class="controls">                <div class="main_input_box">                    <span class="add-on bg_ly"><i class="icon-lock"></i></span><input type="password"                                                                                      placeholder="Password"/>                </div>            </div>        </div>        <div class="control-group">            <div class="controls">                <div class="main_input_box">                    <span class="add-on bg_ly"><i class="icon-lock"></i></span>                    <input type="password"                                                                                      placeholder="用户名"/>                </div>            </div>        </div>        <div class="form-actions">                <span class="pull-left">                    <a href="#" class="flip-link btn btn-info" id="to-recover">forget password</a>                </span>                <span class="pull-right">                    <a type="submit" href="index.html" class="btn btn-success">login</a>                </span>        </div>    </form>    <form id="recoverform" action="#" class="form-vertical" style="display:none">        <p class="normal_text">            please enter you email        </p>        <div class="controls">            <div class="main_input_box">                    <span class="add-on bk_lo">                        <i class="icon-envelope"></i>                    </span>                <input type="text" placeholder="邮箱地址"/>            </div>        </div>    </form></div><script src="../js/jquery.min.js"></script><script>    $(document).ready(function () {        var login = $('#loginform');        var recover = $('#recoverform');        var speed = 400;        $('#to-recover').click(function () {            $("#loginform").slideUp();            $("#recoverform").fadeIn();        });        $('#to-login').click(function () {            $("#recoverform").hide();            $("#loginform").fadeIn();        });        $('#to-login').click(function () {            //为什么这里有两个click        });        if ($.browser.msie == true && $.browser.version.slice(0, 3) < 10) {            $('input[placeholder]').each(function () {                var input = $(this);                $(input).val(input.attr('placeholder'));                $(input).focus(function () {                    if (input.val() == input.attr('placeholder')) {                        input.val('');                    }                });                $(input).blur(function () {                    if (input.val() == '' || input.val() == input.attr('placeholder')) {                        input.val(input.attr('placeholder'));                    }                });            });        }    });</script></body></html>
显示的图像结果为：
现在问题来了，为什么第一个没有空格，而第二次有空格？
原因就是第一个</span>是紧接着<input>的，
而第二个</span>和<input />之间有空格，所以把多个空格显示为一个空格了。
0 0