我正在努力实现以下结果:
Email Password
[Email box] [Password Box] [Log In]
[]keep me logged in Forgot Password?
我已经成功地实现了前两行(Email ... [Log In])但无法塑造最后一行。 这是代码。
<ul>
<li>
<label for="mail">Email: </label><br>
<input type="email" name="mail" /><br>
<input type="checkbox" name="stayLoggedIn" />
<small>Keep me signed in</small>
</li>
<li>
<label for="paswrd">Password: </label><br>
<input type="password" name="paswrd" /><br>
<small>Forgot Password?</small>
</li>
<li><button type="button" name="login">Log In</button></li><br><p> </p>
</ul>
CSS代码如下。
header ul {float: right;}
header ul li {
display: inline-block;
color: #FFEBCD;
font-family: "Maiandra GD";
}
header small {float: right;}
最佳答案
你需要用两个 div 来做到这一点,一个向左浮动,第二个向右浮动
查看 example
<div class="left_div">
<label for="mail">Email: </label><br>
<input type="email" name="mail" /><br>
<input type="checkbox" name="stayLoggedIn" />
<small>Keep me signed in</small>
</div>
<div class="right_div">
<label for="paswrd">Password: </label><br>
<input type="password" name="paswrd" /><br>
<small>Forgot Password?</small>
</div>
CSS代码
.left_div {
float: left;
width: 300px;
}
.right_div {
float: right;
width: 300px;
}
关于html - 调整网页上的 float 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12656720/