html - 组元素？形式

Question

为了好玩，我使用了一段从 friend 那里得到的代码，并尝试创建一个包含用户名和密码的登录字段，但我很难获得单词旁边的字段。 username 这个词和你输入的框之间有很大的差距。密码也是如此。

这是我的代码:

<form method="post" action="https://www.mattepunkten.com/action_login.php"> 
    <input type="hidden" name="error_url" value="http://www."here you write url to webpage one should be directed to when typing wrong login".com"> 
        Username: 
    <input type="text" name="fld_userid" size="15" style="width: 120px"><br> 
        Password: 
    <input type="password" name="fld_password" size="15" style="width: 120px"><br> 
    <input type="submit" name="cmd_invia" value="Login"> 
</form>

我的CSS代码如下。

input {
    color: black;
    margin: 10px 100px 0px 400px;
}
form {
    color: white;
    text-align: right;
    position: fixed;
    margin-top: 30px;
}

我在这方面很陌生，希望得到一些提示!谢谢!

Answer 1

嗯，你的边距很大，试着把它们变小，看看它看起来如何:

input {
    color: black;
    margin: 10px;
}

您使用的样式具有以下格式:

margin: <top> <right> <down> <left>;

因此，如果向右 100px，向左 400px，它们就会离得很远 :)

为了能够设置文本的样式，您需要它成为一个元素，所以一个简单的答案是将它包裹在一些标签中，但这是我个人喜欢的样式，并且增加了更多的含义:

html

<label>
    <span>Username:</span>
    <input name="fld_userid">
</label>

CSS

label { display: block; text-align: center; }
input, span { display: block; width: 200px; }

这应该将文本和输入堆叠在一起，同时将它们按标签分组，因此当您与文本交互时，浏览器会正确地聚焦其相关输入。