奇怪的CSS边距问题

在示例代码中需要注意的一点是,您过度使用了div。相同的代码可以这样编写:

<div class="formRow">
    <label class="fieldName">Email</label>
    <input class="fieldInput" .../>
</div>

或者,更好的是:

<style type="text/css">
    UL, UL LI
    {
        margin: 0px;
        padding: 0px;
     }

    UL LI
    {
        list-style: none;
    }

.fieldName{
        font-size: 12px;
        margin-left: 10px;
        margin-right: 10px;
        width: 100px;

}

.fieldInput{
        width: 200px;
}
</style>

<ul>
    <li><label class="fieldName">Email</label>
        <input class="fieldInput" .../></li>
     ...
</ul>

通过对两个部分使用DIV标记,您违反了标记的语义含义,即“页面的这一部分与其他部分不同”。您真正要做的是设置表单的样式。 label 不同于你的 Input 我们已经有了标签来描述这些。

尝试添加

.fieldName {display: inline}

或

.fieldInput {display: inline}

或两者

如果添加 display: inline; 对于每个元素,这将允许它们并排放置。因为它们被渲染为 block 默认情况下,浏览器会将元素放在自己的行上。

.fieldName{
    font-size: 12px;
    margin-left: 10px;
    margin-right: 10px;
    width: 100px;
    display: inline;    
}

.fieldInput{
    width: 200px;
    display: inline;
}