设计CSS表单的难度

Question

由于围绕表格的所有争议作为表单的布局选项,我决定使用无序列表.我终于按照我的意图显示了标签和元素,但是我添加的'note'div拒绝与它上面的输入对齐.

我已经包含了下面的代码,请原谅我选择的花哨的背景颜色来帮助我判断位置!有没有人有任何关于为什么'note'div拒绝玩的建议？我确信这是一个简单的解决方案,但我完全被难倒了.非常感谢你提前.

form.contact label
{
    float: left;
    position: absolute;
    background: red;
}
form.contact input
{
    width: 200px;
    margin-left: 15em;
}
form.contact .note
{
    margin-left: 15em;
    width: 176px;
    background: yellow;
}
form.contact ul
{
    list-style: none;
    position: absolute;
    padding: 0;
}
form.contact ul li
{
    float: left;    
    clear: left;    
    width: 100%;    
    padding-bottom: 1em;
    margin-bottom: 10px;
    background: pink;
    left: 0;
}

<ul>
        <li>
            <label for="address1">Address Line 1:</label>
            <input name="address1" type="text" id="address1" />
        </li>
        <li>
            <label for="address2">Address Line 2:</label>

            <input name="address2" type="text" id="address2" /> 
        </li>
        <li>
            <label for="address3">Address Line 3:</label>
            <input name="address3" type="text" id="address3" /> 
        </li>
        <li>
            <label for="address4">Address Line 4:</label>
            <input name="address4" type="text" id="address4" /> 
            <div class="note">This is a note</div>

        </li>

        <li>
            <input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" />
        </li>
    </ul>

Answer 1

因为input与div具有由默认不同的字体大小,和使用弹性布局与em测量由字体的大小的影响.

这解决了它:

* {font-size: 12px;}