CODEWITHSUNDEEP
htmlcss
JackofAll
JackofAll

Reputation: 537

HTML and CSS Inline issue with list item

I have an issue with some inline-block divs in a list. Items that span over 2 lines are being pushed down further than the one liners. Can anyone tell me why?

You can see my issue here..

<ul>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 1 line</div>
    </li>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 1 line</div>
    </li>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 2 lines - im longer!</div>
    </li>
</ul>

http://jsfiddle.net/6aqtpoee/

Upvotes: 1

Views: 95

Answers (6)

Roumelis George
Roumelis George

Reputation: 6746

The problem is that the vertical-align property is baseline by default.

Change your css to:

li {
    display: inline-block;
    width: 166px;
    margin: 20px 10px 0 0;
    vertical-align: top;
}

Fiddle

Or you can use float:left like this:

li {
    display: inline-block;
    width: 166px;
    margin: 20px 10px 0 0;
    float: left;
}

Fiddle

Upvotes: 0

risto
risto

Reputation: 1304

The reason this is happening is because of the default vertical-align property for the li element, which is set to baseline. According to MDN:

"baseline
Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other."

As it mentions, that property can be unpredictable browser-to-browser, so give vertical-align a proper value like top or bottom.

Upvotes: 0

Prashant
Prashant

Reputation: 704

see this link DEMO

CSS

.top {
    height: 130px;
    background: #000;
}

.bottom {
    height: 60px;
    padding: 10px 15px;
    background: #4f1d4e;
}

li {
    display: inline-table;
    width: 166px;
    margin: 20px 10px 0 0;
}

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

Just use float:left in li elements:

Check the DEMO

li {
display: inline-block;
float: left;
width: 166px;
margin: 20px 10px 0 0;
}

Upvotes: 0

Victor
Victor

Reputation: 65

You should add vertical-align: top for li. It forces blocks to be aligned by its top border, not baseline.

Upvotes: 0

sodawillow
sodawillow

Reputation: 13176

Fix the vertical alignment with vertical-align: bottom or another value :)

Upvotes: 2

Related Questions