css - chrome中的浮动右输入

Question

我有表格：http: //jsfiddle.net/U8D3w/

<form>
    <label for="username">Username:</label>
    <input type="text" name="username" />
    <br />

    <label for="password">Password:</label>
    <input type="password" name="password" />
    <br />

    <input type="submit" name="signin_submit" value="OKEY" />
</form>

为什么它在 chrome 中有错误的正确行为？

Answer 1

“不，我的意思是按钮和输入未对齐”

您的表单元素具有 100% 的默认宽度...这就是为什么...

给他一个宽度，或者尝试将 display:inline-block 添加到他的样式中

Answer 2

您只是向 button[type=submit] 添加了一个浮点数，这就是为什么您的按钮只是向右浮动的原因。

如果您希望按钮与您的输入对齐，请为容器设置宽度，以便按钮不会浮出框外。您可能需要添加一个清除类（具有 css 属性 clear:both; ），以允许按钮留在 div 内。

http://jsfiddle.net/U8D3w/1/

form{
 width:505px;
}