Question

When I have an unordered list formatted as inline-blocks, the last list element in the list appears to have extra top margin if the other elements have any block content. Take a look at this 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>​

Here is the 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;
}

​
Why does that last list element drop down? Here is a fiddle to demo what I’m doing.

Answer 1

It is weird, but you should force your list items to align to the top using vertical-align: top;. See working version on jsfiddle.

That’s because inline-block elements will align as inline, i.e., siblings will use the baseline as the alignment reference.