html – 创建一个值列表与textarea和标签

这里有一些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;
}

样品在http://jsfiddle.net/quqf8/1/

原文地址：https://www.jb51.cc/html/224046.html