我正在努力使自己的标签与表格保持一致。
这就是我想要他们的方式:
到目前为止,这就是我编码的方式,并且显然不起作用。
<label for="email">Email address</label>
<input type="email" id="email" />
<label for="password_field">Password </label><span><a href="#">Forgot your password?</a></span>
<input type="password" id="password_field" />
<input type="submit" value="Sign in" id="sign_in_form" />
这是CSS:
header input[type="email"], header input[type="password"], label {
display:block;
}
我不确定如何对齐标签,此外,我旁边的链接不是我要保留的跨度的一部分。我迷路了。
有人可以帮我吗?
最佳答案
一种方法是添加带有类的包装div并添加一些CSS。
HTML:
<div class="inputWrapper">
<label for="email">Email address</label>
<input type="email" id="email" />
</div>
<div class="inputWrapper">
<label for="password_field">Password </label><span>
<input type="password" id="password_field" />
</div>
<input type="submit" value="Sign in" id="sign_in_form" />
<a href="#">Forgot your password?</a></span>
CSS:
.inputWrapper label{
display:block;
}
这是有关Codepen的快速演示:http://codepen.io/miguel2k/full/lxopE
关于html - 如何在输入表单顶部对齐标签?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21867568/