html - 在 CSS 中对齐框中的文本

Question

我想在

中对齐文本

#navigation li a{}

a 元素/容器/盒子不应该离开它的位置。我只想将文本放置在元素/容器/框(不管它叫什么)的左下角，边缘有一些空间。 文本对齐分配是不够的。还有别的吗？如前所述:a-element/container/box 不应该通过移动 a-box 中的文本来移动。

我不能将另一个框放入我的 a-box，因为我正在使用的导航是

wp_nav_menu

来自 wordpress。

Answer 1

试试这个:

已更新:带有容器列表项；

#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 */
}

注意 display 属性的值例如； "table-cell", "inline-table", "table", "table-caption", "table-column", "table-column-group", "table-row", "table-row-group", IE7 及更早版本不支持“inherit”。 IE8 需要 !DOCTYPE。 IE9 支持这些值。

这是一个 demo on jsFiddle .