Question

我试图让我的表格浮动正确，以便当所有东西彼此相邻放置时看起来很整洁，并且它工作正常，除了前两个？这就是我的奇怪之处？它在第一个之后运行良好。这是一个截图，说明了所有内容和我的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>

Screenshot example

为什么第一个和第二个之间存在“空间”？

感谢所有人！

Answer 1

这只是因为你要求密码3次..标记不喜欢这样，并且会给你一个随机的间隙。

严肃地说，有几种方法可以解决这个问题。最简单的方法是在导致差距的clear:both上设置br。

jsFiddle example

br {
    clear:both;
}

另外，请删除clear:both中的#form_container input，因为不再需要。{/ p>

#form_container input {
    float: right;
}

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

Answer 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%;
}

Answer 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。

形式对齐表现奇怪

3 个答案: