在左ul浮动列表中对齐文本

Question

Here is my fiddle: http://jsfiddle.net/pUuFb/

How do I align the third element to be on the same line as the first two elements? I've tried vertical-align: bottom but it doesn't work. This seems like a really obvious thing that I'm missing. Anyone know whats going on?

Answer 1

Remove the class date

<ul>
<li>One</li>
<li>Two</li>
<li>
    <div>
        July 2nd
    </div>
</li>

Answer 2

Change the CSS for the list item and div to:

li {
    margin: 0 20px 0 5px;
    display: inline;
}
div {
    display: inline;
}

jsFiddle example