Question

我正在创建平铺导航，我需要的是填充平铺，但是仍然位于右下方位置的文本。但是，当我设置宽度：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>

Answer 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很乱，所以要清理一下

Answer 2

是的，这是可能的。（在锚标记内，您可以放置<p>）并使用以下CSS来<p>

p{

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

以下是演示：

Demo

宽度和高度100％，文字仍然在右下角 - 可能吗？

2 个答案: