我正在努力使自己的标签与表格保持一致。

这就是我想要他们的方式:



到目前为止,这就是我编码的方式,并且显然不起作用。

<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/

10-12 12:47
查看更多