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

为此，我更新了您的一些 css 和 html。

css

input {
    font-family: Arial, Verdana;
    font-size: 15px;
    padding: 5px;
    padding-top:5px
    border: 1px solid #b9bdc1;
    width: 150px;
    color: #797979;
    text-align:center;
    float:left;
    margin-right:10px;
}
.field {
    margin-top:4px;
    margin-bot:2px;
}
.button {
    float:left;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    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;
}
.label{
    float:left; 
    margin-right:10px;
}
.hint{
    clear:both  
}

html

<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" class="label">Email:</form:label>
        <input name="" type="text" class ="input" />
        <input class="button" type="submit" value="VALIDER" />
        <p class="hint">Entrez votre email.</p>
        </div>  
</form:form>

jsFiddle 文件

请检查这是否适合您。

谢谢 ：）

于 2013-05-30T10:31:17.320 回答
0

更改float: none;为float: right;

演示

于 2013-05-30T09:58:41.180 回答
0

将此添加到您的 .button css 中

position:absolute;
    right:15px;
    top:145px;
于 2013-05-30T10:04:50.307 回答
0

更改您的 .button 的 css ...

从

float: none;
margin-top:5px;

至

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

演示：http: //jsfiddle.net/a4QNB/166/

于 2013-05-30T10:42:17.670 回答