带有两个文本标签的框的CSS布局？

Question

我有一个无序列表的项目，我想将每个项目显示为一个带有两行文本的框，每行具有不同的属性（字体、大小、文本对齐...）。我为每个项目使用的标记如下所示：

<li id="1">
    <p class="first"><!-- First line of text --></p>
    <p class="last"><!-- Second line of text --></p>
</li>

使用 CSS 我希望它显示如下：

我的问题是：

1. 我知道这可以通过 CSS 以多种方式实现，但是 什么是正确的方法或最佳实践来实现最佳跨浏览器支持？你能指点我一个类似的 CSS 例子吗？第一个文本标签应距顶部边框 2 px，第二个文本标签距底部边框 2 px。
2. 这是文本标签的正确标记吗？或者我应该使用其他标签而不是<p>？也许<div>？

我使用display: block 作为<li> 标签，固定width 和height。

提前致谢。

Answer 1

如果我理解正确，这应该很好：

Live Demo

在 IE7/IE8 和最新版本中测试：Firefox、Chrome、Safari、Opera。
我也在 IE6 中测试过，在那里工作。

我只是在做所有这些测试，因为你特别要求“最好的跨浏览器支持”:)

我可能很想将<p> 标记更改为<span> 标记，因为这些似乎并不是文本段落。

CSS：

ul {
    list-style: none;
    font-size: 200%;
    line-height: 0.8
}
li {
    display: block;
    width: 140px;
    height: 100px;

    background: #ccc;
    padding: 2px;
    border: 1px solid #000;
    position: relative;
    margin: 8px 0
}
li .last {
    position: absolute;
    bottom: 2px;
    right: 2px
}

HTML：

<ul>
    <li id="l1">
        <p class="first">Text 1</p>
        <p class="last">Text 2</p>
    </li>
    <li id="l2">
        <p class="first">Text 1</p>
        <p class="last">Text 2</p>
    </li> 
</ul>