css - 将文本字段与右侧 html 表单 css 对齐

Question

我正在尝试将表单的文本字段与包含它们的 div 的右侧对齐。我有这个用于css：

应用程序.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-|

文本字段应排列在“用户名：”和“密码：”标签的右侧。

Answer 1

我做了这个

演示

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