Question

我正在尝试在输入顶部浮动标签，但它无法正常工作？也许我弄乱了CSS？非常感谢帮助，谢谢！

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

试试这个

#loginformitem input , #loginformitem label {
clear : left ,
float : left
}

Answer 2

你可以包裹label＆amp; 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

在顶部输入上浮动标签

2 个答案: