Question

当我将无序列表格式化为内联块时，如果其他元素具有任何块内容，则列表中的最后一个列表元素似乎具有额外的上边距。看看这个HTML：

<div id="report_builder">
    <ul id="report_layout_1" class="report_layout ui-droppable">
        <li rel="recid">Id
            <div><input type="text" class="report-column-value"></div>
        </li>
        <li rel="street1">Address
            <div><input type="text" class="report-column-value"></div>
        </li>
        <li>
            Last Field
        </li>
    </ul>
</div>

这是CSS：

#report_builder li {
    font-size: 8pt;
}

#report_builder > ul {
    float: left;
}

.report_layout {
    height: 150px;
}
.report_layout > li {
    display: inline-block;
    padding: 5px;
    margin-left: 2px;
    border: 1px solid #ccc;
    border-top: 10px solid #ccc;
    height: 100px;
    background-color:#fff;
}
.report_layout > li:last {
    cursor: default;
}
.report_layout > li a {
    cursor: pointer;
}
.report_layout > li:nth-child(even) {
    background-color:#eee;
}

#report_builder input.report-column-value {
    width: 95px;
}

为什么最后一个列表元素会下拉？这是一个fiddle来演示我正在做的事情。

Answer 1

这很奇怪，但您应该使用vertical-align: top;强制列表项与顶部对齐。请参阅working version on jsfiddle。

这是因为inline-block元素将对齐为inline，即兄弟姐妹会使用基线作为对齐参考。

Answer 2

在其上设置了内联块的元素在右侧呈现4像素边距。

请参阅this。

＆lt; li＆gt;之间的空格是一个问题。元素。如果删除空格，问题将得到解决。

Answer 3

你可以向左移动li并显示：inline。然后他们排成你的jsfiddle。

http://jsfiddle.net/eHmtR/1/

列表元素的CSS格式具有不正确的余量

3 个答案: