Question

在下面的html片段中，div1偏移216px，div2偏移187.导致这种情况的原因是什么以及如何纠正它。我知道我可以让位置相对而顶部为负29以实现我想要的，但我真正想知道的是为什么broswer将其解释为需要这种不均匀的偏移。列表元素已被截断以提高可读性。这是html5。

<div class="divpnl900W margin2">
    <fieldset>
        <legend>SubscriberSetup</legend>
        <div class="clear-fix">
            <div id="div1" class="divpnl400W inlineblock">
                <ul class="nobullet">
                    <li> <span class="div150RAlgn inlineblock">
                        @Html.LabelFor(model => model.SubscriberCompanyName)
                    </span>
 <span class="editor-field-alLw220 padding1">
                        @Html.EditorFor(model => model.SubscriberCompanyName)
                        @Html.ValidationMessageFor(model => model.SubscriberCompanyName)
                    </span>

                    </li>...</ul>
            </div>
            <div id="div2" class="divpnl400W inlineblock">
                <ul class="nobullet">
                    <li> <span class="div150RAlgn inlineblock">
                        @Html.LabelFor(model => model.SubscriberTrainingType)
                    </span>
 <span class="editor-field-alLw220 padding1">
                        @Html.DropDownListFor(model => model.SubscriberTrainingType, Model.TrainTypes)
                        @Html.ValidationMessageFor(model => model.SubscriberTrainingType)
                    </span>

                    </li>...</ul>@Html.HiddenFor(model => model.SubscriberId, new { @Value = "0" }) @Html.HiddenFor(model => model.SubscriberLoginId, new { @Value = "0" })
                <div style="text-align:right;">
                    <button type="submit" title="Save" role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" style="height:22px;"> <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
 <span class="ui-button-text">Save</span>

                    </button>
                </div>
            </div>
        </div>
    </fieldset>
    <div class="divpnl500W">
        <ul class="nobullet">
            <li> <span class="div150RAlgn inlineblock"><label>Search Company Name:</label></span>
 <span class="editor-field-alLw220 padding1">
                <input type="text" id="txtSrchSubscriber" />
            </span>
 <span>
                <button type="button" title="Search" role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"
                        style="height:22px;" onclick="getSubscriberGrid()">
                    <span class="ui-button-icon-primary ui-icon ui-icon-search"></span>
 <span class="ui-button-text">Search</span>

                </button>
                </span>
            </li>
        </ul>
    </div>

的CSS

.clear-fix:after {
    content:".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
.divpnl900W {
    width:900px;
}
.margin2 {
    margin: 2em;
}
.divpnl400W {
    width:400px;
}
.inlineblock {
    display: inline-block;
}
.div150RAlgn {
    width:150px;
    text-align:right;
    padding-right:3px;
}
.editor-field-alLw220 {
    width:220px;
}
.editor-field-alLw220 input[type="text"] {
    width:210px;
}
.editor-field-alLw220 input[type="password"] {
    width:210px;
}
.nobullet {
    list-style: none;
    list-style-type:none;
    padding-left:1em;
}
html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}
body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family:"Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}
div {
    margin:1px;
    padding:1px;
}

http://jsfiddle.net/isherwood/Fea7A/

Answer 1

垂直对齐div以保持一致性：

#div1, #div2 {vertical-align: top;}

http://jsfiddle.net/isherwood/Fea7A/2/

是什么导致浏览器取消div1额外的29像素

1 个答案: