Question

我尝试过垂直对齐，边缘顶部，顶部，填充，定位以及我能想到的任何技巧，但在任何情况下我都无法将文字放到我的div的顶部。我之前从未遇到过这种情况，所以我觉得我忽略了一些愚蠢的事情......

重要的事情：

HTML

        <div id="login">
            <div class="row20">
                <p class="gray1">username</p>
            </div>
            <div class="row20">
                <p class="gray1">password</p>
            </div>
            <div class="row20">
                <p class="gray1">new here? | forgot password?</p>
            </div>
        </div>

CSS

 #login {
    position: absolute;
    border: 1px solid #ccc;
    height: 73px;
    width: 260px;
    left: 620px;
    top: 3px;
    vertical-align: top;
    padding: 0px;
    margin-top: 0px;
}
div.row20 {
    height: 20px;
    border: 1px solid #cccccc;
}
p.gray1 {
    font-size: 14px;
    color: #444444;
}

我从我的代码中删除了所有将文本推送到这些div的顶部的尝试，因为它们都没有工作。但是，我确实尝试了我能找到的一切。我想要＆＃34; row20＆＃34; div用作我的表单的对齐方式。如果我使用br，则往往会使文本框与文本对齐变得更加困难。由于某种原因，p文本显示从父div的顶部向下约18px。我所做的一切都没有改变......

Answer 1

您的内部p元素溢出div容器，因为它具有顶部和底部默认margins，因此您应将其移除以满足您的需求：

p.gray1 { margin:0; }

JSFiddle

Answer 2

你的身高在row20，所以你在对齐方面遇到困难，请使用行高：

p.gray1{
   font-size: 14px;
   color: #444444;
   line-height: 20px;/*or something that fits your align*/
   margin: 0;/*remove default margins*/
   padding: 0;
}

#login {
    position: absolute;
    border: 1px solid #ccc;
    height: 73px;
    width: 260px;
    left: 620px;
    top: 3px;
    vertical-align: top;
    padding: 0px;
    margin-top: 0px;
}
div.row20 {
    height: 20px;
    border: 1px solid #cccccc;
}
p.gray1 {
    font-size: 14px;
    color: #444444;
  margin: 0;
  padding: 0;
  line-height: 20px;
}

        <div id="login">
            <div class="row20">
                <p class="gray1">username</p>
            </div>
            <div class="row20">
                <p class="gray1">password</p>
            </div>
            <div class="row20">
                <p class="gray1">new here? | forgot password?</p>
            </div>
        </div>

Answer 3

如果您想知道如何修复这些问题，最好尝试在firefox中使用firebug扩展，然后尝试使用代码也可以更改值并立即查看结果，因此您不会再次混淆。

文本不会与div的顶部对齐

3 个答案:

JSFiddle