使用textarea和标签排列值列表

Question

这里有一些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"之后的另一行.

Answer 1

垂直对齐在内联元素中不起作用,但在表格中有效(有关vertical-align的更多详细信息).

所以这是一个解决方案:我只是将第一个li中的两个主要元素包装在一个表格行中,并将垂直对齐设置为底部以强制将"最近数据"标签放在底部.(可能有某种方法使用display属性来更改li内联元素？)

您还需要调整的填充ol和labelS和table标签让一切都行了.在现实生活中,您可能会使用某种重置css来规范所有这些不同元素的默认样式规则,因此您可能需要进行不同的调整以使所有内容完美排列,但这就是我想出的.

现在总共:

<style>
table,tbody,tfoot,thead,tr,th,td {
   margin:0;
   padding:0;
   border:0;
   outline:0;
   font-size:100%;
   vertical-align:baseline;
   background:transparent}
body{line-height:1}
ol,ul{list-style:none}
table {border-spacing: 0px;}
table td{
  vertical-align: bottom;
}

* {
  font-size: 14px;
  font-family: Times New Roman, serif;
} 
form label {
  width: 140px;
  float: left;
} 
form ol li {
  background: #98c8dc;
  list-style: none;
  padding: 5px;
  margin-bottom: 2px;
} 
form ol li:last-child {
  margin-bottom: 0px;
}
form li label{
  padding: 4px 0 4px 0;
} 
</style>

<form>
<ol>
<li>
<table><tr><td>
  <label>Recent data</label>
</td><td>
  <ol>
  <li>3 99</li>
  <li>5 98</li>
  <li>15 97</li>
  <li>28 96</li>
  </ol>
</td>
</tr></table>
</li>
<li>
  <label>New data</label>
  <textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>

Answer 2

这是 CSS 定位的一个很好的例子。的元素position:absolute相对于其最近定位的父元素进行定位。position:relative这意味着我们可以使用<ol>、 和position:absolute标签将标签锚定到其容器的顶部/左侧。

示例如下： 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/