Question

＆＃13;

.label{
padding: 10px;
font-weight: bold;
} 


input{
padding: 10px;
margin: 0 0 10px 0;
text-align: left;
}

＆＃13;

<label class="label">user </label><input type="text" name="usr"/><br>
<label class="label">pass </label><input type="text" name="pass"/><br>
<label class="label">user </label><input type="text" name="rpass"/><br>

＆＃13;

我是css的新手，我想对齐我的文本字段，但是当我运行它时，我看到文本字段不在一行中。也许是因为label标签。我应该将CSS写入标签吗？你能帮忙解决这个css属性吗？

Answer 1

不清楚你的意思是他们没有对齐。我在小提琴中尝试了它，它们看起来与我水平对齐。我的猜测是你的标签长度不同，因此将输入推向不同的距离。要解决此问题，请在标签上添加样式，以便将其设置为相同的宽度，而不管内容如何。为此，请尝试

.label{
    padding: 10px;
    font-weight: bold;
    display: inline-block;
    width: 40px;
    /* Don't necessarily use 40px, try and figure out what works best for your case */
 }

Answer 2

如果删除<br>标记，则可以正常使用。

https://jsfiddle.net/TheBlueLabCo/y5xbgjt9/或Full Screen result。

使用css对齐输入标签

2 个答案: