将文本放置在所需位置

Question

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

我希望忘记密码？在输入字段结束的地方结束。我试过这样做，但我做不到。请帮我解决这个问题。它从所需位置向右移动。

Answer 1

我想你把忘记密码的位置放错了。

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

Answer 2

您应该为 label 添加以下 css 以便标签宽度与 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>

Answer 3

首先，您需要删除标签后的 <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;
}

将文本放置在所需位置

position the text in the required place

html

css

css-position