Inline-block elements get pushed vertically depending on sibling elements

Question

So I have a horizontal navigation menu, constructed as a list and made horizontal with inline-block on each list item. Every item in the list has say, 16px font-size, except for one. One I give a bigger font-size like 24px, and it makes every other element get pushed down.

How can I make each item in the list independent of another sibling item's properties?

Example code:

<style>
/*CSS Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
}
/*=====================*/
#wrap{
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    background: purple;
    overflow: hidden;
}
    #wrap > #block1{
        height: 100px;
        max-width: 500px;
        background: blue;
    }
        #wrap > #block1 > ul{
            background: yellow;
            font-size: 0px;
        }
            #wrap > #block1 > ul > li{
                display: inline-block;
                background: green;
                font-size: 16px;
            }
            #wrap > #block1 > ul > li:last-child{
                font-size: 24px;
            }
</style>

<div id="wrap">
    <div id="block1">
        <ul>
            <li>Test1</li>
            <li>Test2</li>
            <li>Test3</li>
            <li>Test4</li>
            <li>Test5</li>
            <li>Test6</li>
            <li>Test7</li>
            <li>Title</li>
        </ul>
    </div>
    <div>
        </br>This is the after thing</br></br>
    </div>
</div>

JS Fiddle where all items have same font-size.

JS Fiddle where one item has a larger font-size.

So again, all I want to do is make all items stay fixed to the top of the ul, instead of getting pushed down if another item exceeds the height of the other items.

score 6 · Accepted Answer · answered Nov 22 '13 at 06:51

6

your vertical-align: baseline; is pushing the list content to the mid-section.
change vertical-align to vertical-align: top;
this will push all li to the top of the div.

answered Nov 22 '13 at 06:51

NoobEditor

15,563
19
81
112

Awesome, thanks! I thought vertical-align was just for images and table-cells so I didn't even think of this :) – Jazcash Nov 22 '13 at 06:52
please accept this answer too..i badly need points to post questions!! – NoobEditor Nov 22 '13 at 06:53
Have to wait for 15 minutes after posting a question to accept an answer, 5 minutes left, don't worry I will accept it ;) – Jazcash Nov 22 '13 at 06:57

score 3 · Answer 2 · answered Nov 22 '13 at 06:52

3

just add

vertical-align: top;

in

#wrap > #block1 > ul > li

answered Nov 22 '13 at 06:52

Kinjan Koradiya

469
1
5
17

Inline-block elements get pushed vertically depending on sibling elements

2 Answers2