html - 调整网页上的浮动元素

Question

我正在尝试实现以下结果：

                                              Email               Password
                                              [Email box]         [Password Box] [Log In]
                                              []keep me logged in Forgot Password?

我已经成功地实现了前两行（电子邮件... [登录]），但无法塑造最后一行。这是代码。

<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 的左侧浮动，右侧的第二个浮动来执行此操作

看一个例子

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