Html 尝试将我的标签置于输入类型文本上方

我有一个登录表单，我试图把我的跨度放在输入之上，但我没有成功做到这一点，我所有的尝试，我都有相同的结果，那就是：

标签：[输入]

但是我想要

标签：

[输入]

你知道怎么做吗？因为默认情况下，标签似乎总是向左对齐

这就是我所尝试的： 我有这个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>

将

Pass:

更改为

Pass

Span使用inline的显示样式，该样式尝试将内容放入其中，就像它是句子的一部分一样。你可以把这句话中的每个单词想象成一个长方形，并且这些长方形相互“内联”或在同一条线上

---

Div使用block的显示样式，该样式尝试创建一个全宽的矩形，第一个父级具有宽度（不确定）。因此，您可以将div视为一个块，它拥有所占用行的全部宽度。

我认为您可以为其提供更好的方法，但一个简单的

会给出您想要的结果：

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

电邮：

您可以

将
您的
span
（
.loginbox form.label.field
CSS类）元素显示为
块
，而不是默认的
内联
：

.loginbox form .label .field{
     display:block;
     width:60px;
     font-size:20px;
     margin:7px 10px 3px 3px;
}

您的html结构似乎有点奇怪，不过如果您想获得与您发布的相同的结果，还应该删除
text align:right

您应该使用实际的
标签
元素，而不是将类
标签
放在随机、任意的
div
元素上……谢谢您的建议！但你能更好地解释为什么吗？因为我经常这样用！因为除非使用
label
元素，否则它不会具有标签功能。
.loginbox form .label .field{
     display:block;
     width:60px;
     font-size:20px;
     margin:7px 10px 3px 3px;
}