HTML and CSS Inline issue with list item

Question

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/

possible duplicate of [Why is this inline-block element pushed downward?](http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward) — Vucko, Dec 30 '14 at 08:54

score 2 · Answer 1 · answered Dec 30 '14 at 08:53

2

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

answered Dec 30 '14 at 08:53

sodawillow

12,497
4
34
44

You provided the answer, but you didn't say why is this happening. – Vucko Dec 30 '14 at 08:55
You're right. I'm kinda new here, I'll try to improve my future answers :). – sodawillow Dec 30 '14 at 09:30

score 0 · Answer 2 · answered Dec 30 '14 at 08:54

0

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

answered Dec 30 '14 at 08:54

Victor

65
2
7

score 0 · Accepted Answer · answered Dec 30 '14 at 08:56

0

Just use float:left in li elements:

Check the DEMO

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

answered Dec 30 '14 at 08:56

kapantzak

11,610
4
39
61

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

0

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;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 30 '14 at 08:56

Prashant

704
10
23

Roumelis George · Answer 5 · 2014-12-30T09:05:51.877

0

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

edited Dec 30 '14 at 09:05

answered Dec 30 '14 at 09:00

Roumelis George

6,602
2
16
31

score 0 · Answer 6 · answered Dec 30 '14 at 09:01

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.

HTML and CSS Inline issue with list item

6 Answers6

CSS