0

送信ボタンを水平方向に揃える方法がわかりません。送信ボタンを入力フィールドの右側に揃えたいと思います。私はいくつかのことを試みますが、うまくいきません。

ここに私のhtmlファイルがあります:

 <body>
<form:form class="form" method="post" action="/it-portail/passwordChange.mvc" commandName='email'>
    <h3>Formulaire email</h3>
    <form:errors class ="errorPass" path="email" />
    <div class="field">
        <form:label path="email">Email:</form:label>
        <form:input class ="input" path="email" />
        <p class="hint">Entrez votre email.</p>
        </div>  
        <input class="button" type="submit" value="VALIDER" />
</form:form>

ここに私のcssファイルがあります:

.form {
width: 600px;
display:inline-block;
padding: 20px;
background: #f0f0f0;
overflow: auto;
/* Border style */
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
/* Border Shadow */
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
position:absolute;
left: 30%;
top: 40%;
width: 600px;
height: 200px;
margin-left: -100px; /* Cette valeur doit être la moitié négative de la valeur du width */
margin-top: -100px; /* Cette valeur doit être la moitié négative de la valeur du height */
}





input {
font-family: Arial, Verdana;
font-size: 15px;
padding: 5px;
padding-top:5px
border: 1px solid #b9bdc1;
width: 150px;
color: #797979;
text-align:center;
}

.field {
margin-top:4px;
margin-bot:2px;
}


.button {
float: none;
margin-top:5px;
font-weight: bold;
line-height: 1;

cursor: pointer;
color: #fff;
vertical-align:40%;
text-shadow: 0 -1px 1px #64799e;
/* Background gradient */
background: #a5b8da;
background: -moz-linear-gradient(top, #a5b8da 0%, #7089b3 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a5b8da),
    to(#7089b3));
/* Border style */
border: 1px solid #5c6f91;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Box shadow */
-moz-box-shadow: inset 0 1px 0 0 #aec3e5;
-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
box-shadow: inset 0 1px 0 0 #aec3e5;
}

ありがとう、

4

4 に答える 4

0

float: none;に変更float: right;

デモ

于 2013-05-30T09:58:41.180 に答える
0

.button の css を変更してください...

から

float: none;
margin-top:5px;

に

float: right;
margin-top:-25px;

デモ: http://jsfiddle.net/a4QNB/166/

于 2013-05-30T10:42:17.670 に答える
0

これを .button css に次のように追加します

position:absolute;
    right:15px;
    top:145px;
于 2013-05-30T10:04:50.307 に答える