【问题标题】：Make a list of values line up with a textarea and labels使值列表与文本区域和标签对齐
【发布时间】：2011-11-15 01:29:28
【问题描述】：

这里有一些 CSS 和 HTML，用于在数据点列表下方创建一个文本区域：

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”之后的另一行一样排列.

【问题讨论】：

谁能给我一些关于赏金礼仪的建议？我想把它交给@Bee，让我在我提出要求后的 24 小时内加入并确定它。就渲染的质量而言，没有人改进她的答案，但在代码的优雅方面却名列前茅。例如，我可以让最优雅的解决方案成为公认的解决方案，但根据回答速度奖励赏金吗？我的意思是，我知道我可以，但是 stackoverflow 精神中最重要的是什么？（披露：蜜蜂和我是现实生活中的共同黑客。）
据我所知，赏金可以拆分，并且不受接受的答案的约束
在您的 HTML 代码中，您不应该为最近的数据使用标签，因为没有相应的表单元素。与下面的标签具有完全相同样式的跨度或内联 p 是可以的（我的首选命名是类 .label_like ^^）。对于与标签关联的表单元素，您应该像往常一样在标签和文本区域之间添加 for/id 关联。
这可能会让人毛骨悚然，但从语义上讲，如果您要应用list-style: none; 来列出项目，您应该考虑使用ul 而不是ol，因为没有字母或数字ordering - 它们只是没有项目符号的项目符号点。 ;-)
（它没有让我分红。我让 Ricardo Tomasi 的答案被接受。它也值得更多的支持！非常感谢大家的所有这些好答案！）

标签： html css layout textarea

【解决方案1】：

垂直对齐在行内元素中不起作用，但在表格中起作用 (more details on 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>

【讨论】：

【解决方案2】：

这是一个很好的 CSS 定位案例。带有position:absolute 的元素相对于它们最近的定位父元素进行定位。这意味着我们可以使用position:relative 上的position:relative 和标签上的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/ 的示例

【讨论】：

【解决方案3】：

如果你想让东西表现得像一张桌子，那就像一张桌子一样显示它。将 CSS 的 table、table-row 和 table-cell 用于元素的 display 属性。然后，您可以使用垂直对齐和其他表格“仅”的东西。请注意，我使用 > 作为 CSS 选择器，因此内部列表也不会获得这些样式。

http://jsfiddle.net/nQWBw/2/

CSS：

.table-like {
    display: table;
    border: 1px solid red;
    background: #98c8dc;
    margin: 0;
    padding: 0;
}
.table-like > LI {
    display: table-row;
    border: 1px solid lime;
    list-style: none;
    margin: 0;
    padding: 0;
}
.table-like > LI > LABEL ,
.table-like > LI > OL ,
.table-like > LI > TEXTAREA {
    display: table-cell;
    border: 1px dashed magenta;
    /* padding: 5px 10px; */
    vertical-align: top;
}
.table-like LI:first-child > *{
    vertical-align: bottom;
}
.table-like > LI > OL > LI {
    display: block;
    margin: 0;
    padding: 0;
}

HTML：

<form>
    <ol class="table-like">
        <li>
            <label>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>

【讨论】：

【解决方案4】：

从textarea 中删除边框和填充，并将其设置为相同的字体。

大概是http://jsfiddle.net/vP7As/1/

【讨论】：

啊，感谢 jsfiddle 链接！但我认为这行不通。 textarea 上没有边框看起来很糟糕，你不觉得吗？
true，你总是可以将边框设置为 1px，然后为其他项目添加 1px 的边距。

【解决方案5】：

这里有一个解决方案。 no table，no jquery，只需在第一个 lable 中添加一个 p 标签

Demo in fiddle

在 safari 15、firefox 6 和 ie8 中测试。

我认为您应该为计算设置一个line-weigh。例如，我设置18px 使<ol><li>3 99...</ol> 中的整个高度为(18+5+5)*4=112px（两个5px 用于您的li:padding 高度），然后为position 控件添加一个p 标签。

HTML 部分：

<form>
<ol>
<li>
    <label><p>Recent data</p></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>

CSS 部分：

form{font:14px/18px arial;}

form label {
  width: 140px;
  float: left;  
}
form>ol>li>label {
     height: 112px; 
     position:relative;
}
form>ol>li>label>p {
    position:absolute;
    bottom:5px;  /* 5px for the last li(28.96) padding-bottom:5px   */
    left:0;
}
form ol li {
  background: #98c8dc;
  list-style: none;
  padding: 5px 10px;
}

【讨论】：

【解决方案6】：

试试这个：使用一些position: reltive;，你可以把它全部排列起来。

<html>
<head>
<style type="text/css">
form {
background: #98c8dc;
padding: 5px 10px;
}
form label {
width: 140px;
float: left;
position: relative;
bottom: 20px;
display: block;
}
form label span {
display: block;
}
form ol li {
display: table-row;
list-style: none;
}
#area {
position: relative;
right: 5px;
}
</style>
</head>
<body>
<form>
<label>&nbsp;</label>
<ol>
<li>3 99</li>
<li>5 98</li>
<li>15 97</li>
<li>28 96</li>
</ol>
<label><span>Recent data</span>New data</label>
<textarea id="area" placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>
</body>
</html>

但是看起来您确实在处理表格数据，在这种情况下，简单地使用表格可能是最好的方法。

【讨论】：

【解决方案7】：

垂直对齐适用于 inline-block 元素
http://jsfiddle.net/s3ayp/

<!-- HTML -->
<form>
  <ol>
    <li class="lineup lineup-bottom">
      <label >Recent data</label>
      <ol>
        <li class="first">3 99</li>
        <li>5 98</li>
        <li>15 97</li>
        <li class="last">28 96</li>
      </ol>
    </li>
    <li class="lineup lineup-top">
      <label>New data</label>
      <ol>
        <li>
          <textarea placeholder="30 95" rows="4"></textarea>
        </li>
      </ol>
    </li>
  </ol>
</form>

 /* CSS */
.lineup > * {
    display: -moz-inline-box; /* FF 2 */
    display: inline-block;
}
*:first-child + html .lineup > * { /* IE7 hack */
    display: inline;
}

.lineup.lineup-top > * {
    vertical-align: top;
}

.lineup.lineup-bottom > * {
    vertical-align: bottom;
}
form label {
    width: 140px;
    vertical-align: bottom;
}
ol {
    background: #98c8dc;
    list-style: none;
}
ol li {
    padding: 5px 10px;
}
ol li.first {
    padding-top: 0
}
ol li.last {
    padding-bottom: 0
}

【讨论】：

【解决方案8】：

一些 JQuery

您可以使用 jquery 使用列表元素编号动态设置标签填充。

http://jsfiddle.net/uSehQ/2/

<script type="text/javascript">
$(document).ready(function() {
    var size = $("#data").children().size();
    var top = 5+30*(size-1);
    $("#label").css("padding", top+"px 0 0 0")
});
</script>
<style>
form label {
  width: 140px;
  float: left;
}
form ol li {
  background: #98c8dc;
  list-style: none;
  padding: 5px 10px;
}
</style>
<form>
<ol>
<li>
  <label id="label">Recent data</label>
  <ol id="data">
  <li>3 99</li>
  <li>5 98</li>
  <li>15 97</li>
  <li>20 25</li>
  <li>30 95</li>
  </ol>
</li>
<li>
  <label>New data</label>
  <textarea placeholder="40 76" rows="4"></textarea>
</li>
</ol>
</form>

【讨论】：