0

I am trying to have my forms float right, so that it looks neat when everything is placed next to each other, and it works fine, EXCEPT for the first 2? That is what weirds me out? It works great after the first 2. Here is a screenshot that says it all and my HTML code

    <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

Why is there that "space" between the first and second ones?

Thanks on advance everyone!

4

3 回答 3

0

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

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

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

在 CSS 中：

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

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

请参阅此JSFiddle。

于 2013-11-07T19:47:31.173 回答
0

这仅仅是因为您要求输入密码 3 次.. 标记不喜欢这样，并向您抛出一个随机间隙。

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

jsFiddle 示例

br {
    clear:both;
}

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

#form_container input {
    float: right;
}

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

于 2013-11-07T19:43:36.700 回答
0

稍微重组你的标记以添加标签（无论如何你都可以拥有），你可以<br>完全放弃 's。这里的工作示例：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%;
}
于 2013-11-07T19:46:59.690 回答