CODEWITHSUNDEEP
htmlcss
davidethell
davidethell

Reputation: 12048

CSS Formatting of List Element has improper margin

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.

Upvotes: 0

Views: 99

Answers (3)

bfavaretto
bfavaretto

Reputation: 71939

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.

Upvotes: 2

Luke
Luke

Reputation: 2063

You could make the li float left and display: inline. They are lined up in your jsfiddle then.

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

Upvotes: 0

Dov
Dov

Reputation: 121

Elements with inline-block set on them render with a 4 pixel margin to the right.

See this.

It is an issue with the white space between the <li> elements. If you remove the white space, the issue will be resolved.

Upvotes: 1

Related Questions