html - 定位标题在容器底部

标签 html css

我正在尝试将标题标签 float 到 li 标签的底部,如下图所示。因此,即使文本很短,它也始终位于底部,仅在上方延伸。

标题似乎溢出了 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

最佳答案

如果我没有正确理解你想要什么:

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

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

关于html - 定位标题在容器底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11031870/

相关文章:

html - 带滚动的响应式全屏图像

html - 基于下拉选项使用 CSS 显示和隐藏部分

android - android 上的网页布局

javascript - 如何使用 Angular 设置背景颜色?

html - 覆盖边距折叠

html - 我无法获得带有角色文本框的 div,向上而不是向下 flex

html - CSS边框半径背景颜色出血

html - CSS 内容元素使用 :before img works weird

twitter-bootstrap - 顶部带有 H 元素的框阴影 (Bootstrap 3)

html - css 中段落的伪类不起作用