Question

I would like to align text in a

#navigation li a{}

The a-element/container/box shouldnt leave its position. I only want to position the text at the left bottom of the element/container/box (however its called) with some space to the edges.
The text-align-assignment isn’t enough. Is there something else? As mentioned before: The a-element/container/box should not move by moving the text in the a-box.

I cannot put another box into my a-box, because the nav I am using is the

wp_nav_menu

from wordpress.

Answer 1

Try this:

UPDATED: With the container list item;

#navigation li {
    display: table-cell;
    vertical-align: bottom;
    text-align: left;
    padding: 0; /* if you want no spaces at the edges inside the anchor. */
    /* ... rest of your properties */
}

#navigation li a {
    padding: 0; /* if you want no spaces at the edges inside the list item. */
    /* ... rest of your properties */
}

Note: The values of the display property such as; “table-cell”, “inline-table”, “table”, “table-caption”, “table-column”, “table-column-group”, “table-row”, “table-row-group”, and “inherit” are not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.

Here is a demo on jsFiddle.