Как выровнять метку поверх формы ввода?

Question

Как выровнять метку поверх формы ввода?

0

Я борюсь с выравниванием своего ярлыка с моими формами.

Вот как я их хочу:

Вот как я его закодировал до сих пор, и он явно не работает.

<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;
}

Я не уверен, как выровнять метки, кроме того, у меня есть ссылка, которая не является частью диапазона, который я хочу сохранить рядом с ним. Я потерялся.

Может ли кто-нибудь мне помочь?

user2755537 19 фев. 2014, в 00:39

Источник

Теги:

html

css

3 ответа

Ещё вопросы

Migs · Answer 1 · 2014-02-18T21-49-00.000Z

Один из способов сделать это - добавить обертку 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;
}

Ниже приведена краткая демо-версия кодека: http://codepen.io/miguel2k/full/lxopE

Skriptotajs · Answer 2 · 2014-02-18T20-50-00.000Z

Вот одно из решений: http://jsfiddle.net/yLaxs/

<label for="email">Email address
    <input type="email" id="email" />
</label>
    <label for="password_field">Password <a href="#">Forgot your password?</a>
    <input type="password" id="password_field" />
</label>
<label>
    <br />
    <input type="submit" value="Sign in" id="sign_in_form" />
</label>

и css

label
{
    float:left;
    width:30%;
}
a
{
    font-size:8px;
}

Jatin · Answer 3 · 2014-02-18T20-42-00.000Z

Рабочий пример

<label for="email">Email address <br/>
<input type="email" id="email" />
</label>
<label for="password_field">Password <a href="#">Forgot your password?</a>
<input type="password" id="password_field" />
</label>
<label>
<br />
<input type="submit" value="Sign in" id="sign_in_form" />
</label>

label
{
float:left;
width:30%;
}

Надеюсь это поможет.