позиция, расположенная в нижней части контейнера

Question

Я пытаюсь поместить тег заголовка в конец тега li, как на изображении ниже. Таким образом, даже когда текст короток, он всегда остается внизу и распространяется только выше.

Заголовок кажется излишним из ли. Любая помощь очень ценится. Пожалуйста, см http://jsfiddle.net/noscirre/JtVGp/1/

<ul style="list-style:none;"> 
    <li style="float:left; width:70px; height:90px; margin:0 10px 10px 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; border: 4px solid #0CF; padding:10px; position:relative;"> 
     <a title href="#"> 
      <div style="background:#9F0; width: 50px; height: 50px; float:left; display:block"></div> 
      <h2 style="font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:right; bottom: 10px; position:absolute ">ANOTHER APP</h2> 
     </a> 
    </li> 
</ul> 

Answer 1

Если я понял корр. ectly что вы хотите:

добавить right: 5px в ваш заголовок - это будет место с правого края Li, поэтому он не будет выглядеть как это overspilling

вы можете играть со значениями right и width к достичь нужного результата.

Answer 2

Эй добавить одну строку CSS в коде

определить белое пространство в вашем CSS так, как этот

white-space: pre; 

Live Demo http://jsfiddle.net/JtVGp/2/