在顶部输入上浮动标签(Floating label on top inputs)

在顶部输入上浮动标签(Floating label on top inputs)

我试图在输入的顶部浮动一个标签，但它不能正常工作？ 也许我弄乱了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; }

I am trying to float a label on top of the input but it's not working correctly? Maybe I messed up the CSS? Help would be greatly appreciated, thanks!

Heres what it looks like at the moment: 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; }

最满意答案

您可以将label和input包装为显示为inline-block的<p>或<span> 。

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

you can wrap label & input into a <p> or a <span> displayed as inline-block.

input can be displayed as block to break the line.

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

Turns to look like DEMO