將文本字段對齊html表單css

Question

我想將表單的文本字段對齊到包含它們的div的右側。我有這樣的CSS：

application.css

#loginform { 
    width: 400px; 
    height: 300px; 
    background: rgba(237,191,92, 1); 
    margin-left: 0px; 
    padding: 10px; 
} 

#usertext, #passtext { 
    text-align: left; 
} 

#loginuser, #loginpass { 
    text-align: right; 
} 

#submitbutton { 
    text-align: center; 
} 

這裏是我的html：

indexform.php

<div id="loginform"> 
<form id="login" method="post" action="checklogin.php"> 
    <h1>Member Login</h1> 
    <div id="usertext"> 
     <p>Username:</p> 
    </div> 
    <div id="passtext"> 
     <p>Password:</p> 
    </div> 
    <div id="loginuser"> 
     <input name="myusername" type="text" id="myusername"> 
    </div> 
    <div id="loginpass"> 
     <input name="mypassword" type="password" id="mypassword"> 
    </div> 
    <div id="submitbutton"> 
     <input type="submit" name="Submit" value="Login"> 
    </div> 
</form> 
</div> 

現在會發生什麼：

Username: 
Password: 

|--username textfield--| 
|--password textfield--| 

|-login button-| 

文本字段應該是li直到「用戶名：」和「密碼：」標籤的右側。

Answer 1

我這樣做

DEMO

<div id="loginuser"> 
    <input name="myusername" type="text" id="myusername"> 
</div> 
<div id="usertext"> 
    <p>Username:</p> 
</div> 
<div id="loginpass"> 
    <input name="mypassword" type="password" id="mypassword"> 
</div> 
<div id="passtext"> 
    <p>Password:</p> 
</div> 

和

#loginuser, #loginpass { 
    float: right; 
}