html - 在文本输入下直接对齐文本

这是我的HTML和CSS：

HTML：

<div id="navrow">
    <img style="float: left;" src="questerslogoresized.png" />
    <ul>
        <li>Register</li>&nbsp&nbsp&nbsp
        <li>About</li>&nbsp&nbsp&nbsp
        <li>Reviews</li>&nbsp&nbsp&nbsp
        <form id='login' action='<?php echo $fgmembersite->GetSelfScript(); ?>' method='post'>
            <div style="position: absolute; right: 120px;">
                <input type='hidden' name='submitted' id='submitted' value='1' />
                <label for="username">Your username goes here</label>
                <input type='text' name='username' class="formlogin" placeholder='Username' id='username' value='<?php echo $fgmembersite->SafeDisplay(' username ') ?>' maxlength="20" />
                <span id='login_username_errorloc' class='error'></span>
                <input type='password' class="formlogin" placeholder="Password" name='password' id='password' maxlength="50" />
                <span id='login_password_errorloc' class='error'></span>
            </div>
            <input type='submit' style='position: absolute; top: 18px; right: 45px;' name='Submit' value='Submit' />
            <!--<div class='short_explanation'><a href='reset-pwd-req.php'>Forgot Password?</a></div>-->
        </form>
    </ul>
</div>

CSS：

#navrow {
    background: #ffc966;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 75px;
    box-shadow: 0px 0px 15px 0px #000;
}
.formlogin {
    border-radius: 12px 12px 12px 12px;
    height: 24px;
    /*width: 200px;*/
    padding: 5px;
    border-style: solid;
    border-color: #0093cc;
    -webkit-transition: border-color 1s ease;
    -moz-transition: border-color 1s ease;
    -o-transition: border-color 1s ease;
    -ms-transition: border-color 1s ease;
    transition: border-color 1s ease;
    display: inline-block;
    font-size: 16px;
    width: 12.5em;
    position: relative;
    top: -2em;
}

我想知道如何获取直接位于用户名输入字段下方的用户名标签（您的用户名在此处）。

帮助将不胜感激。再次感谢Stack Overflow！

最佳答案

我认为您的意思是this demo之类的。

在我的示例中，想法是用input和label包裹div和div.form-controls。然后，将input和label设置为阻止元素，并且标签应位于输入下方。

我还从几个元素中删除了position值。根据您的需要进行调整。

#navrow {
  background: #ffc966;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 75px;
  box-shadow: 0px 0px 15px 0px #000;
}
.formlogin {
  border-radius: 12px 12px 12px 12px;
  height: 24px;
  /*width: 200px;*/
  padding: 5px;
  border-style: solid;
  border-color: #0093cc;
  -webkit-transition: border-color 1s ease;
  -moz-transition: border-color 1s ease;
  -o-transition: border-color 1s ease;
  -ms-transition: border-color 1s ease;
  transition: border-color 1s ease;
  display: block;
  font-size: 16px;
  width: 12.5em;
}
.form-controls {
  float: left;
}

<div id="navrow">
  <img style="float: left;" src="questerslogoresized.png" />
  <ul>
    <li>Register</li>&nbsp&nbsp&nbsp
    <li>About</li>&nbsp&nbsp&nbsp
    <li>Reviews</li>&nbsp&nbsp&nbsp
    <form id='login' action='<?php echo $fgmembersite->GetSelfScript(); ?>' method='post'>
      <div>
        <div class="form-controls">
          <input type='hidden' name='submitted' id='submitted' value='1' />
          <input type='text' name='username' class="formlogin" placeholder='Username' id='username' value='' maxlength="20" />
          <label for="username">Your username goes here</label> <span id='login_username_errorloc' class='error'></span>

        </div>
        <div class="form-controls">
          <input type='password' class="formlogin" placeholder="Password" name='password' id='password' maxlength="50" />
          <span id='login_password_errorloc' class='error'></span>

        </div>
        <p style="clear:both"></p>
      </div>
      <input type='submit' style='position: absolute; top: 18px; right: 45px;' name='Submit' value='Submit' />
      <!--<div class='short_explanation'><a href='reset-pwd-req.php'>Forgot Password?</a></div>--></div>
</form>
</ul>

警报！良好做法-


不要将 用于空间问题。有CSS。
速记！ border-radius: 12px 12px 12px 12px;可能只是border-radius : 12px;
不要使用内联样式。同样，有CSS。

关于html - 在文本输入下直接对齐文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30612050/