1

私は次の結果を達成しようとしています:

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

最初の 2 行 (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;}
4

1 に答える 1

1

これを行うには、2 つの div の 1 つのフロートを左に、2 つ目のフロートを右に配置する必要があります。

例を見る

<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;    
 }
于 2012-09-29T21:46:09.933 に答える