html - 在容器底部定位标题

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

嘿，在您的代码中添加一行 css

像这样在你的css中定义空白

 white-space: pre;

现场演示http://jsfiddle.net/JtVGp/2/

Answer 2

如果我正确理解了您想要的内容：

添加right: 5px到您的标题 - 这会将其与 li 的右边缘隔开，因此看起来不会溢出

您可以使用 的值right并width获得所需的正确结果。