Question

我需要放在底部的<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/

提前致谢

Answer 1

您需要从position:relative;课程中删除menu li a，然后应用display:table-cell;即可。

以下是WORKING SOLUTION

守则：

.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;
}

要了解使用vertical-align的方式和时间的完整逻辑，请参阅THIS ARTICLE。

希望这有助于。

Answer 2

在主导航中执行以下操作：

明确：两者;

这将确保您的链接始终位于其上方的任何位置。

您也可以使用：

float：left;

然后

clear：none;

关于其他要素。这将迫使他们不要环绕文本。

盖

垂直对齐底部不起作用

2 个答案: