調整網頁上的

我試圖實現以下浮動元素：調整網頁上的

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

來源

2012-09-29 Muavia

看起來你已經收到了你之後的答案。我注意到的一件事是，您正在爲標籤標籤使用「for」屬性，但它們實際上是無用的。「for」屬性指向一個元素的id，而不是它的名字。爲了充分利用您的代碼，請將ID添加到您的輸入中，以反映您使用的相同名稱與相應的「for」，並且您將很好。 Src：http://www.w3schools.com/tags/att_label_for.asp – Mike

我讀到「for」作爲HTML5的新增內容，它可以幫助您瞭解您的輸入。但我不知道它究竟是如何做到的。您的評論有幫助。 – Muavia

你需要有兩個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;  
}

來源

2012-09-29 21:46:09 Silagy

調整網頁上的

回答

相關問題