html - 顶部输入的 float 标签

Question

我想在输入的顶部 float 一个标签，但它不能正常工作？也许我搞砸了 CSS？将不胜感激，谢谢!

这是目前的样子: http://prntscr.com/37hw30

HTML:

<form id="loginformitem" name="loginformitem" method="post" style="float:right">

    <label for="username">Username</label>
    <input type="text" name="log_username" class="logintext"  id="username" placeholder="Username" style="margin-left:100px">

        <label for="password">Password</label>
     <input type="password" name="log_password" class="logintext" id="password" placeholder="Password">

         <button type="submit" class="loginbutton" name="login" >Login now</button>

     </form>

CSS:

.logintext {
    margin-right: 10px;
    border: 2px solid rgba(0,0,0,0);
border-radius: 2px;
padding: 2px 2px 3px 2px;
font-size: 13px;
color: #222;
}

form label {
font-size: 13px;
font-weight: bold;
color: #a4c0d7;
}

Answer 1

你可以换行label & input进入 <p>或 <span>显示为 inline-block .

input可以显示为block打破这条线。

HTML

<form id="loginformitem" name="loginformitem" method="post" >
  <span>
    <label for="username">Username</label>
    <input type="text" name="log_username" class="logintext"  id="username" placeholder="Username" >
  </span>
  <span>
    <label for="password">Password</label>
    <input type="password" name="log_password" class="logintext" id="password" placeholder="Password">
  </span>
  <button type="submit" class="loginbutton" name="login" >Login now</button>
</form>

CSS

form span {
  display:inline-block;
  margin:0 50px;
  vertical-align:bottom;
}
span input {
 display:block;/* if you want submit under , do form input {} to include it too */
}
form {
  float:right;
  /* for the demo */
  border:solid;
  border-radius:1em;
  padding:0.25em;
}

看起来像 DEMO