html - 尝试将我的标签放在输入类型文本上方

Question

我有一个登录表单，我试图将我的跨度放在输入上方，但我没有成功做到这一点，我所有的尝试，我都有相同的结果，即:

标签: [输入]

但我想要

标签:

[输入]

你知道这样做的技巧吗？因为默认情况下标签似乎总是左对齐..

这就是我正在尝试的:http://jsfiddle.net/8JkMm/ 我有这个html:

<div class="loginbox">
    <h1>Login:</h1>
    <form name="login" action="" method="post">
        <label class="label">
            <span class="field">Email:</span>
            <input type="text" name="user" />
        </label>

        <div class="label">
            <span class="field">Pass:</span>
            <input type="password" name="pass" class="pass" />
            <input type="submit" value="Login" class="btn" />
             <a href="index.php?remember=true" class="link">Forgot Password<i class="fa fa-chevron-right"></i></a>
        </div>        
    </form>
</div>

还有这个 CSS:

.loginbox{position:absolute; left:50%; top:50%; background:rgba(255,255,255,0.9); width:360px; height:265px;}
.loginbox{margin-left:-180px; margin-top:-125px;}
.loginbox h1{padding:20px; font-weight:200; color:#FFF; background:pink;}
.loginbox form{padding:20px;}
.loginbox form .label{display:block; margin-bottom:10px;  width:320px;}
.loginbox form .label .field{ width:60px; text-align:right; font-size:20px; margin:7px 10px 3px 3px;}
.loginbox form .label input{padding:10px; font-size:16px; border:1px solid #CCC; width:225px;}
.loginbox form .label .pass{width:225px;}
.loginbox form .label .btn{float:right; width:auto; display:block;  border:none; font-size:14px; text-transform:uppercase; margin:15px auto;}
.loginbox form .label .btn{padding:11px 10px 11px; color:#fff;  cursor:pointer;}
.loginbox form .link {float:left;margin:15px auto;  color:#000;}

Answer 1

我认为你可以为此找到更好的方法，但是一个简单的 </br>给出你想要的结果:

<label class="label">
            <span class="field">Email:</span></br>
            <input type="text" name="user" />
</label>