Question

我找不到如何水平对齐我的提交按钮。我想将我的提交按钮对齐到输入字段的右侧。我尝试了几件事，但它不起作用。

这是我的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;
}

感谢，

Answer 1

将float: none;更改为float: right;

<强> DEMO

Answer 2

将此添加到您的.button css

position:absolute;
    right:15px;
    top:145px;

Answer 3

为此我已经更新了你的一些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 File

请检查这是否适合您。

谢谢：）

Answer 4

更改.button的css ...

来自

float: none;
margin-top:5px;

到

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

DEMO：http://jsfiddle.net/a4QNB/166/

无法正确对齐我的按钮

4 个答案: