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的一个浮动到左边第二个浮动到右边

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

调整网页上的浮动元素

1 个答案: