带有两个文本标签的框的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>

Answer 2

您可以使用这样的选择器：

#1 p + p { padding-right: ..px }

如果我对CSS有任何了解，应该在＃1

中获得p元素的相邻兄弟

Answer 3

我将如何做到这一点：

li
{
  display: block;
  padding: 2px;
  height: xxpx; /* The height that you gave the li */
  width: xxpx; /* The width that you gave the li */
}

li p
{
  height: xxpx;
}

li p.first
{
  float: left;
}

li p.second
{ 
  float: right;
  /*
  To place the 2nd text at the bottom right corner you need to give it a 
  margin top
  The value of this margin should be the total height of the li tag minus the 
  height of text (p tag) and minus the total vertical padding that is 4px.
  */
  margin-top: xxpx;
}

我想这会做到的。希望它有所帮助。