如何用css定位标签文本

Question

所以我正在制作一个简单的登录表单，我希望将这两个标签文本放在各自的输入上，而不是有这么大的空间差距。相当新的抱歉。

HTML

<form>
<fieldset>
    <label>Username
        <input type="username" class="button-user">
    </label>
    <label>Password
        <input type="password" class="button-pw">
    </label>
</fieldset>
<fieldset class="button-space">
    <input type="submit" class="button">
</fieldset>
</form>

CSS

fieldset {
width: 200px;
}
.button-space {
height: 50px;
background: #f0f0f2;
border-top: 1px;
}
.button {
margin-top: 13px;
}
.button-pw {
margin-top: 20px;
}
.button-user {
margin-top: 20px;
}

http://jsfiddle.net/ypNUU/

Answer 1

删除这些规则：

.button-pw {
    margin-top: 20px;
}
.button-user {
    margin-top: 20px;
}

他们正在增加标签和字段之间的差距。 Fiddle here

Answer 2

您好，您可以将保证金更改为此

.button-pw {
    margin-top: 0px;
}
.button-user {
    margin-top: 0px;
}

Answer 3

那应该解决它;）

fieldset {
    width: 200px;
}
.button-space {
    height: 50px;
    background: #f0f0f2;
    border-top: 1px;
}
.button {
    margin-top: 13px;
}
.button-pw {
    display:block;
    margin-bottom:20px;
}
.button-user {
    display:block;
    margin-bottom:20px;
}

http://jsfiddle.net/ypNUU/5/

如果您不想在PW文本框和按钮之间留出间隙，请在margin-bottom中将.button-pw设置为0px http://jsfiddle.net/ypNUU/6/

Answer 4

进行以下更改......

/*.button-pw {
    margin-top: 20px;
}*/
.button-user {
    /*margin-top: 20px;*/
    margin-bottom: 20px;
}

它看起来像......

演示：http://jsfiddle.net/ypNUU/4/