1

フォームのテキスト フィールドを、それらが含まれる 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です：

インデックスフォーム.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-|

テキスト フィールドは、"Username:" および "Password:" ラベルの右側に並べる必要があります。

4

1 に答える 1

4

これは私がしました

デモ 

 <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;
}
于 2013-06-20T20:57:34.780 に答える