0

我需要将所有文本<a href="#"><strong>Home</strong><span>This is a home</span></a>放在底部，但 css 代码不起作用。

css

a { text-decoration: none; color: #777; }

.menu {
    margin: 0;
    list-style: none;
}
.menu li {
    position: relative;
    display: inline-block;
}
.menu li a {
    position: relative;
    height: 100px;
    display: block;
    width: auto;
    border: 1px solid #eee;
    background: #fbfbfb;
    padding: 10px 20px;
}
.menu li a span,
.menu li a strong {
    display: block;
    border-bottom: 1px solid #bfbfbf;
    vertical-align: bottom;
}

这里的实时代码http://jsfiddle.net/wgjfL/

提前致谢

4

2 回答 2

5

您需要position:relative;从menu li a班级中删除并应用 adisplay:table-cell;才能使其工作。

这是工作解决方案

编码：

.menu li a {
    background: none repeat scroll 0 0 #FBFBFB;
    border: 1px solid #EEEEEE;
    display: table-cell;
    height: 100px;
    padding: 10px 20px;
    vertical-align: bottom;
    width: auto;
}

要了解如何以及何时使用垂直对齐的完整逻辑，请参阅本文。

希望这可以帮助。

于 2013-06-17T06:00:49.087 回答
0

只需在主导航上执行以下操作：

明确：两者；

这将确保您的链接始终位于其上方任何内容的底部。

您还可以使用：

向左飘浮;

然后

明确：无；

在其他元素上。这将迫使他们不要环绕文本。

盖伊

于 2013-06-17T06:01:28.797 回答