html - 奇怪的 CSS 边距问题

Question

我正在设计一个由客户设计的具有以下结构的表单:

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

表单的宽度为 500px，但 fieldName div 和 fieldInput div 堆叠在一起，而不是并排放置。这是因为(至少在 Chrome 和 Firefox 中)，fieldName div 的计算右边距为 340 像素，占据了表单的整个宽度。

我似乎也无法覆盖此行为。输入 10px 的 margin-right 没有任何作用。将 div 的宽度设置为固定数字或百分比只会改变内部宽度，而不会改变奇怪的右边距。

我遇到了什么 CSS 问题？

顺便说一句，这是 CSS:

.formRow{
    padding: 3px 0 3px 0;
    position: relative;
    height: auto;
    width: 100%;
}

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

}

.fieldInput{
        width: 200px;
}

Answer 1

在您的示例代码中需要注意的一件事是您过度使用了 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 不同的样式，我们已经有标签来描述这些。