html - 调整网页上的 float 元素

Question

我正在努力实现以下结果:

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

Answer 1

你需要用两个 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;    
 }