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/ 这里有一些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 >          <strong>Recent data</strong>          <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>

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" >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" >New data</th>                <td colspan="2" >                    <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/

总结

以上是内存溢出为你收集整理的html – 创建一个值列表与textarea和标签全部内容，希望文章能够帮你解决html – 创建一个值列表与textarea和标签所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。