Question

为了好玩，我从朋友那里得到了一段代码，并试图用用户名和密码创建一个登录字段，我很难找到单词旁边的字段。用户名和您键入的框之间存在很大差距。密码同样适用。

这是我的代码：

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

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

Answer 2

我将添加一个解释

margin: 10px 100px 0px 400px;

代表：

top margin is 10px
right margin is 100px
bottom margin is 0px
left margin is 400px

Answer 3

您是否尝试过使用标签 - 保持标签语义和格式化，另外如果您将inputs包裹起来，它会为所述字段提供更大的匹配区域。另外 - 我删除了输入边距，删除了表格定位和浮动，因此它保留了它的块级别，并调整了整体form边距，使其居中。

<强> HTML

<form method="post" action="https://www.mattepunkten.com/action_login.php"> 
    <input type="hidden" name="error_url" value="#"/> 

    <label>Username: 
    <input type="text" name="fld_userid" size="15"/><label>

    <label>Password: 
    <input type="password" name="fld_password" size="15"/></label>

    <input type="submit" name="cmd_invia" value="Login"/> 
</form>

<强> CSS

label {
    display: block;
}
form {
    text-align: center;
    margin-top: 30px auto;
}

http://jsfiddle.net/evanbriggs/kad7yy1L/

Answer 4

用于在<label>代码中包含标签的更好形式。

例如：

<div class="form-element">
  <label for="foo">Label</label>
  <input type="text" name="foo" id="foo" />
</div>

CSS将其设置为左对齐样式：

.form-element label {
    display: inline-block;
    width: 150px;
}

小组项目？形成

4 个答案:

HTML

CSS