Question

我正在设计一个由客户设计的表单，其格式如下：

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

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

我似乎无法覆盖此行为。输入10px的保证金权利无效。并且将div的宽度设置为硬数或百分比只会改变内部宽度，而不是奇怪的右边距。

我遇到什么CSS头痛，这里？

BTW，这是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不同，我们已经有标签来描述这些。

Answer 2

尝试添加

.fieldName {display: inline}

或

.fieldInput {display: inline}

或两者

Answer 3

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

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

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

奇怪的CSS边际问题

3 个答案: