这里有一些CSS和
HTML,可以在数据点列表下方创建一个textarea：
form label {
width: 140px;
float: left;
}
form ol li {
background: #98c8dc;
list-style: none;
padding: 5px 10px;
}
<form>
<ol>
<li>
<label><br/><br/><br/><br/>Recent data</label>
<ol>
<li>3 99</li>
<li>5 98</li>
<li>15 97</li>
<li>28 96</li>
</ol>
</li>
<li>
<label>New data</label>
<textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>
它呈现如下：
你会怎么推荐我把它排好吧？
也就是说,“最近的数据”应该符合“28 96”线,也许最棘手的是,“30 95”,尽管在文本区域,应该排列好像是“28 96”之后的另一行.
解决方法
这是CSS定位的好例子.位置绝对的元素是相对于他们最靠近的父母定位的.这意味着我们可以使用位置：相对于< ol>和位置：绝对标签将标签锚定到其容器的顶部/左侧.
示例：http://jsfiddle.net/YhQYS/1/
HTML：
<form action="." method="post">
<ol>
<li class="recent-data">
<strong>Recent data</strong>
<ol>
<li>3 99</li>
<li>5 98</li>
<li>15 97</li>
<li>28 96</li>
</ol>
</li>
<li class="new-data">
<label>New data</label>
<textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>
CSS：
form > ol {
background: #98c8dc;
font-family: serif;
}
.recent-data > ol,.new-data > ol {
list-style: none;
padding: 5px 10px 5px 0;
line-height:20px;
}
.recent-data li { padding-left:5px; }
.recent-data,.new-data {
position:relative;
padding-left:140px;
}
.recent-data strong,.new-data label {
position:absolute;
left:10px;
line-height:20px;
}
.recent-data strong { bottom:5px; }
.new-data label { top:5px; }
.new-data textarea {
font-family:serif;
font-size:100%;
padding:4px;
}
这是非常简单的理由,和可靠的跨浏览器.请注意,您不应使用< label>没有记者表格控制.
但是这些东西看起来像表格数据…这是你的选择,我们没有足够的上下文来知道什么标记更合适.所以这里是一个更语义上正确的方法,使用表,rowspan和vertical-align：
HTML：
<form action="." method="post">
<table id="results">
<tbody>
<tr>
<th rowspan="4" scope="row" class="recent-label">Recent data</th>
<td>2</td>
<td>47</td>
</tr>
<tr>
<td>3</td>
<td>99</td>
</tr>
<tr>
<td>5</td>
<td>98</td>
</tr>
<tr>
<td>5</td>
<td>98</td>
</tr>
<tr>
<th rowspan="1" scope="row" class="new-label">New data</th>
<td colspan="2" class="new-data">
<textarea>23</textarea>
</td>
</tr>
</tbody>
</table>
</form>
CSS：
form {
background: #98c8dc;
font-family: serif;
}
#results th,#results td {
padding:3px 5px;
}
#results .recent-label {
vertical-align:bottom;
}
#results .new-label {
vertical-align:top;
}
#results .new-data {
padding-left:0px;
}
#results textarea {
padding:4px; // +1px border
font-size:100%;
font-family:serif;
}
