Выровнять по вертикали смешанные элементы внутри элементов li

Question

Долгое время читатель, первый пост :) Есть хорошие идеи для этого?:

У меня есть 4 <li> элемента, отображаемых как inline-block.

Каждый из этих элементов содержит набор элементов.3 содержат <h3> и <div>.1 содержит <q>, <strong> и <a>.

Мой вопрос: как я могу выровнять текст этих элементов по вертикали, не ограничивая объем текста внутри или не знаяколичество текста в пределах заранее?По мере увеличения длины текста более короткие столбцы опускаются внизу <ul>, когда я хочу, чтобы они оставались сверху!

код и результат можно просмотреть здесь: http://jsfiddle.net/m6HG5/5/

Спасибо!

Answer 1

Если я правильно понимаю ваш вопрос, вам нужно указать высоту строки вашего элемента UL:

<ul>
    <li><h3>List Item 1</h3></li>
    <li><strong>List Item 2</strong></li>
    <li><a href="#">List Item 3</a></li>
</ul>

И стиль:

 ul {
        line-height:1em;
    }

li {
    float:left;
    vertical-align:middle;
    padding:5px;
    display:block;
}

h3 {
    font-size:1.5em;
}

strong {
    font-weight:bold;}

http://jsfiddle.net/m6HG5/3/