расположите текст в нужном месте - PullRequest
Новая
       5

расположите текст в нужном месте

1 голос
/ 11 марта 2020

HTML

<div class="form">
    <!-- USERNAME BOX-->
    <label for="username"><b>Username or email address</b></label><br>
    <input type="text" name="username" value=""><br>
    <!-- PASSWORD BOX -->
    <label for="password">
      Password
      <a href="">Forgot password?</a>
    </label><br>
    <input type="password" name="password" value=""><br>
    <!-- SIGN IN BUTTON -->
    <input type="button" name="button" value="Sign in">

  </div>

CSS

.form{
   background: white;
   border: 1px solid #aaa;
   padding: 15px;
   border-radius: 5px;
  }
label{
   font-size: 12px;
   font-weight: 600;
   text-align: left;
  }
input{
   margin-top: 5px;
   margin-bottom: 10px;
   width: 300px;
   height: 25px;
   border-radius: 5px;
   border: 1px solid #aaa;
   text-indent: 5px;
   box-shadow: inset 0 0 1px #000;
   outline-color: dodgerblue;
  }
input[type="button"]{
   background: green;
   color: white;
   font-weight: 600;
   height: 30px;
   border: darkgreen;
  }
label a{
   float: right;
   transform: translateY(3px);
   text-decoration: none;
  }

Я хочу Забыли пароль? чтобы закончить именно там, где закончилось поле ввода. Я пытался сделать это, но не смог. Пожалуйста, помогите мне исправить это. Смещение вправо от требуемой позиции.

Ответы [ 3 ]

1 голос
/ 11 марта 2020

Вы должны добавить следующие css для label, чтобы метка была такой же ширины, как input, а ее Forgot password? выровнялась с полем ввода. 

   width: 300px;
   display: inline-block;


.form{
   background: white;
   border: 1px solid #aaa;
   padding: 15px;
   border-radius: 5px;
  }
label{
   font-size: 12px;
   font-weight: 600;
   text-align: left;
   width: 300px;
   display: inline-block;
  }
input{
   margin-top: 5px;
   margin-bottom: 10px;
   width: 300px;
   height: 25px;
   border-radius: 5px;
   border: 1px solid #aaa;
   text-indent: 5px;
   box-shadow: inset 0 0 1px #000;
   outline-color: dodgerblue;
  }
input[type="button"]{
   background: green;
   color: white;
   font-weight: 600;
   height: 30px;
   border: darkgreen;
  }
label a{
   float: right;
   /* transform: translateY(3px); */
   text-decoration: none;
  }
<div class="form">
  <!-- USERNAME BOX-->
  <label for="username"><b>Username or email address</b></label><br>
  <input type="text" name="username" value=""><br>
  <!-- PASSWORD BOX -->
  <label for="password">
    Password
    <a href="">Forgot password?</a>
  </label><br>
  <input type="password" name="password" value=""><br>
  <!-- SIGN IN BUTTON -->
  <input type="button" name="button" value="Sign in">

</div>
1 голос
/ 11 марта 2020

Во-первых, вам нужно удалить <br> s после меток: 

<div class="form">
  <!-- USERNAME BOX-->
  <label for="username"><b>Username or email address</b></label>
  <input type="text" name="username" value=""><br>
  <!-- PASSWORD BOX -->
  <label for="password">
    Password
    <a href="">Forgot password?</a>
  </label>
  <input type="password" name="password" value=""><br>
  <!-- SIGN IN BUTTON -->
  <input type="button" name="button" value="Sign in">
</div>

Затем вам нужно добавить display: block; и width: 310px; к метке: 

label {
   font-size: 12px;
   font-weight: 600;
   text-align: left;
   display: block;
   width: 310px;
}
0 голосов
/ 11 марта 2020

Я думаю, вы установили, что забыли пароль в неправильном месте. 

<div class="form">
    <!-- USERNAME BOX-->
    <label for="username"><b>Username or email address</b></label><br>
    <input type="text" name="username" value=""><br>
    <!-- PASSWORD BOX -->
    <label for="password">
      Password
      
    </label><br>
    <input type="password" name="password" value=""><a href="">Forgot password?</a>
    <br> 
    <!-- SIGN IN BUTTON -->
    <input type="button" name="button" value="Sign in">

  </div>
...