位于容器底部的位置

时间:2012-06-14 11:12:28

标签: html css

我试图将标题标记浮动到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>

enter image description here

2 个答案:

答案 0 :(得分:0)

嘿,在你的代码中添加一行css

在css中定义白色空间,如下所示

 white-space: pre;

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

答案 1 :(得分:0)

如果我理解了你想要的东西:

right: 5px添加到您的标题中 - 这会将其与li的右边缘隔开,这样看起来就不会显得过于充实

您可以使用rightwidth的值来获得您想要的正确结果。