0

我正在创建平铺导航，我需要的是填充瓷砖，但来自 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>
4

2 回答 2

2

li display: table-cell代替并inline-block;使用vertical-align: bottom

演示

#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 有点乱，所以清理一下

于 2013-05-13T09:38:38.173 回答
0

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

p{

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

这是演示：

演示

于 2013-05-13T09:35:54.580 回答