宽度和高度为 100%，文本仍在右下角 - 可能吗？答案

【问题标题】：a width and height 100% and text still at the bottom right - possible?宽度和高度为 100%，文本仍在右下角 - 可能吗？
【发布时间】：2013-05-07 07:02:40
【问题描述】：

我正在创建平铺导航，我需要 a 来填充平铺，但来自 a 的文本仍位于右下角位置。但是，当我将其设置为宽度：100% 和高度：100%（相对于 li）时，文本会跳到该区域的左上角。我知道为什么会发生这种情况，我想我理解整个想法，我不知道如何在仍然填充瓷砖的同时强制它跳回右下角。

代码如下：

    #menu {
width: 900px;
float: right;
display: block;
margin:0;
padding:0;
}


#menu ul{
list-style:none;
display: block;
margin:0;
padding:0;
}

#menu ul li{
display:inline-block;
width: 146.5px;
height: 146.5px;
background-color: #1BA1E2;
position: relative;
}

#menu ul li a{
text-decoration: none;
color: #fff;
display: block;
padding-right:5px;
padding-top:5px;
width: 100%;
height: 100%;

和html：

      <div id="menu">
           <ul>
                <li><a href="#">pies</a></li>
                <li><a href="#">kot</a></li>
                <li><a href="#">czołg</a></li>
                <li><a href="#">ryba</a></li>
                <li><a href="#">yea</a></li>
                <li><a href="#">umc</a></li>

           </ul>
      </div>

【问题讨论】：

标签： html position padding area tile

【解决方案1】：

使用li display: table-cell 而不是inline-block; 并使用vertical-align: bottom

Demo

#menu ul li {
    width: 146.5px;
    height: 146.5px;
    background-color: #1BA1E2;
    position: relative;
    vertical-align: bottom;
    display:table-cell;
    text-align: right;
    border: 1px solid #000;
}

注意：你的 CSS 有点乱，所以清理一下

【讨论】：

@Pete Nice 1 .. 你彻底改变了它，你几乎收拾了烂摊子，我给了他这个主意:)
我试过了，它对齐得很好，但是 a（即使在上面的小提琴中）并没有延伸到瓷砖 - 它只适用于文本。我需要的是让整个图块成为活动区域。
@MichałSkrzypek 我假设您希望整个块的行为类似于右下角的链接和文本？看到这个，你需要再次更改那个jsfiddle.net/DwtPu/1的标记和样式
@MichałSkrzypek 您欢迎 :) 如果这有帮助，您可以将答案标记为正确，以便将来的访问者可以参考
好吧，这太傻了 - 我不知道该怎么做 :) 会不会是我的 lv 太低了？

【解决方案2】：

是的，这是可能的。（在锚标签内你可以放<p>）并使用下面的CSS到<p>

p{

   margin-top:125px;
   float:right;
}

这里是演示：

Demo

【讨论】：

我试过了，它对齐得很好，但是 a（即使在上面的小提琴中）并没有延伸到瓷砖 - 它只适用于文本。我需要的是让整个图块成为活动区域。