CSS问题：Javascript密码验证消息放置错误

Question

我正在使用this link for password match validation。 一切都很好。但问题是我在字段之上收到消息，而不是在确认密码字段旁边。这就是我的尝试;

JavaScript功能

function checkPass(){
    var password = document.getElementById('password');
    var password2 = document.getElementById('password2');             
    var message = document.getElementById('confirmMessage');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";

    if(password.value == password2.value){
        password2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = 'Passwords Match!'            
    }else{
        //The passwords do not match.
        //Set the color to the bad color and
        //notify the user.
        password2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = 'Passwords Do Not Match!'
    }
}

HTML

<div id="wrapper">
    <form name="form" id="form" class="form" onsubmit="someFunction(this);return false">
        <label for="password">Password:</label><input type="password" style="color: #B8B894;" value="Password" onblur="if(this.value == '') { this.value='Password'}" onfocus="if (this.value == 'Password') {this.value=''}" name="password" id="password" />
        <label for="password2">Confirm Pass:</label><input type="password" name="password2" id="password2" onkeyup="checkPass(); return false;" />
        <span id="confirmMessage" class="confirmMessage"></span><br/>
        <input type="submit" value="Submit" class="submit" />
        <input type="button" name="reset_form" value="Reset All Fields " onclick="this.form.reset();">
    </form>
</div>

CSS

<style type="text/css">
  #wrapper {width:75%; margin:70px auto}
  .form {float:left; padding:0 139px 10px 10px; background:#f3f3f3; border:2px solid #cfcfcf width: 100%;}
  .form label {float:left; width:100px; padding:10px 10px 0 0; font-weight:bold font:12px Verdana, Arial, Helvetica, sans-serif; color:#666}
  .form select {float:left; width:146px; margin-top:10px}
  .form input {float:left; margin-top:10px}
  .form .submit {clear:both}
  .form #confirmMessage {font-size: 0.9em; margin:5px; padding:10px 10px;}
  .form input.password {font:normal normal normal 1em verdana,arial,sans-serif; padding:4px 6px 3px 6px; border:1px solid #ccc; border-top-color:#aaa; border-bottom-color:#ddd; cursor:text; width:286px; -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);}
  #msg {display:none; position:absolute; z-index:200; background:url(images/msg_arrow.gif) left center no-repeat; padding-left:7px}
  #msgcontent {display:block; background:#f3e6e6; border:3px solid #924949; border-left:none; padding:5px; min-width:150px; max-width:250px}
</style>

结果呈现如下图像;

如何解决这个问题？

编辑：我忘记在CSS中输入我的问题#wrapper。我现在在我的问题中添加了。

编辑＃2：现在我把所有内容放在我的<style>标记之间。请帮助。

Answer 1

你现在把所有东西都浮到左边，所以跨度不知道应该去哪里。
如果您使用了您所说的代码页面中的代码，那么就不会发生这种情况。

无论如何，我删除了你的css中的一些浮动和一些错误，它现在看起来像这样。

 #wrapper {width:75%; margin:70px auto}
 .form {padding:0 10px 10px 10px; background:#f3f3f3; border:2px solid #cfcfcf;}
 .form label {display:inline-block; width:100px; margin:10px 0;
    font:bold 12px Verdana, Arial, Helvetica, sans-serif; color:#666}
 .form select {float:left; width:146px; margin-top:10px}
 .form .submit {clear:both}
 .form #confirmMessage {font-size: 0.9em;}

我还在第一个<br>之后添加了input。结果就像this jsFiddle。