Question

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

标签： [输入]

但我想要

标签：

[INPUT]

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

我正在尝试这样做：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>

Answer 2

您可以display span .loginbox form .label .field CSS类）元素block而不是默认inline：< / p>

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

您的 html 结构似乎有点奇怪，但如果您希望获得相同的结果，那么您还应该删除text-align:right。

Example

Answer 3

将<span class="field">Pass:</span>更改为<div class="field">Pass</div>

Span使用内联的显示样式，它试图将内容放入句子中，就好像它是句子的一部分一样。人们可以将这个句子中的每个单词都想象成一个矩形，并且矩形是“内联”或彼此在同一条线上。

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

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

3 个答案: