Vertical-Align list item to bottom

Question

I've read through plenty of related articles on this site and others and it seems I'm still missing something pretty basic.

I have a parent div and an unordered list. The div has a set height and I want to list items to be inline-line and on the bottom of the parent div.

Thanks!

Fiddle: http://jsfiddle.net/np2qm6rz/1/

<div class="parent">
    <ul>
        <li> Item 1 </li>
        <li> Item 1 </li>
        <li> Item 1 </li>
        <li> Item 1 </li>
    </ul>
</div>
.parent {
    border: 1px solid lime;
    height: 100px;
}
ul {
    border: 1px solid black;
}
li {
    border: 1px solid red;
    display: table-cell;
    vertical-align: bottom
}

Answer 1

One approach is adding a full-height (pseudo-)element to the .parent to affect the parent's baseline and move the inline level elements to the bottom of the box, Then use vertical-align: bottom declaration in order to keep elements - including letters having descenders - within the parent:

EXAMPLE HERE

.parent:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
}

ul {
    display: inline-block;
    vertical-align: bottom;
}

li { float: left; }

You could refer to my answer for further info:

• How to align a label to the "BOTTOM" of a div in CSS?

Answer 2

JSFIDDLE

Add position:relative to your parent tag and position:absolute; bottom:0px to your list, so it sticks to the bottom of the div.

Edit: Updated jsfiddle link.