我找不到如何水平对齐我的提交按钮。 我想将提交按钮对齐到输入字段的右侧。 我尝试了几件事，但没有用。
这是我的 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;
}
谢谢，
最佳答案
将 float: none; 更改为 float: right;
关于html - 无法正确对齐我的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16833116/