表单对齐行为怪异答案

【问题标题】：Form alignment acting weird表单对齐行为怪异
【发布时间】：2013-11-07 19:36:33
【问题描述】：

我试图让我的表单正确浮动，这样当所有东西都放在一起时它看起来很整洁，并且工作正常，除了前两个？这就是让我感到奇怪的地方？它在前 2 个之后效果很好。这是一个说明一切的屏幕截图和我的 HTML 代码

    <head>
 <title>New user</title>
 <style type="text/css">
    #form_container {
        width: 25%;
    }

    #form_container input {
        float: right;
        clear: both;
    }
 </style>
</head>

<body>

    <div id="form_container">
        <form action="" method="post">
            Username: <input type="text" name="username" value="" /><br />
            Password: <input type="text" name="username" value="" /><br />
            Password again: <input type="text" name="username" value="" /><br />
            Password triple: <input type="text" name="username" value="" /><br />
        </form>
    </div>

</body>

为什么第一个和第二个之间有那个“空间”？

提前谢谢大家！

【问题讨论】：

尝试使用label 标签来环绕输入和文本。像这样，<label for="username">Username: <input type="text" id="username" name="username" value="" /></label>
刚试过，没解决:(同样的问题
参考肖恩的回答。

标签： html css forms alignment

【解决方案1】：

这只是因为您要求输入密码 3 次.. 标记不喜欢这样，并随机给您一个空白。

说真的，有几种方法可以解决这个问题。最简单的方法是在 br 上设置 clear:both。这是造成差距的原因。

jsFiddle example

br {
    clear:both;
}

另外，从 #form_container input 中删除 clear:both，因为不再需要了。

#form_container input {
    float: right;
}

我还建议将label 添加到每个输入以进行验证。

【讨论】：

哈哈，笑死我了！我就想，这是真的吗？当我读到前 2 行时 ^^ 解决了它的问题，我会在 3 分钟内接受你的答案 :) 非常感谢！

【解决方案2】：

稍微重组你的标记以添加标签（无论如何你都可以拥有），你可以完全放弃<br>。这里的工作示例：http://jsfiddle.net/designingsean/rWfek/1/

HTML：

<div id="form_container">
    <form action="" method="post">
        <label>Username</label>
        <input type="text" name="username" value="" />
        <label>Password</label>
        <input type="text" name="username" value="" />
        <label>Password again</label>
        <input type="text" name="username" value="" />
        <label>Password triple</label>
        <input type="text" name="username" value="" />
    </form>
</div>

CSS 的重要部分：

label {
    float:left;
    width:50%;
}

【讨论】：

【解决方案3】：

第一个答案很好，但我也建议将所有内容都包含在 label 中。

好处是当你点击标签文字'用户名：'时，它会自动把焦点放在输入框中。虽然这看起来很小，但它确实有助于触摸设备，尤其是无线电输入 - 尝试点击小 10x10 无线电框。使用label 会更好、更直观。

<label>Username: <input type="text" name="username" value="" /></label>

在 CSS 中：

#form_container label {
    display:block;
    clear:both;
}

另外，如果您还不知道这一点，我建议您使用 <input type="password"/> 作为密码。

看到这个JSFiddle。

【讨论】：