ширина и высота 100% и текст еще внизу справа - возможно?

Question

Я создаю черепичную навигацию, и мне нужно, чтобы она заполнила плитку, но текст из все еще будет расположен в правом нижнем положении. Однако, когда я делаю его шириной: 100% и высота: 100% (по отношению к ли), текст прыгает в верхнюю левую часть области. Я знаю, почему это происходит, я думаю, что понимаю всю идею, но я не знаю, как заставить ее прыгать назад вправо, все еще заполняя плитку.

Вот код:

#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

Сделать свой lidisplay: 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