一些JQuery

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>

它呈现如下：

enter image description here

你怎么建议我把它排好？也就是说，“最近的数据”应该排在“28 96”线上，也许最棘手的是，“30 95”，尽管在文本区域，但应排成一线，好像它只是“28 96”之后的另一排

Answer 1

垂直对齐在内联元素中不起作用，但在表格中起作用（more details on vertical-align）。

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

您还需要调整ol以及label和table标记上的填充，以便所有内容排成一行。在现实生活中，您可能会使用某种重置css来规范所有这些不同元素的默认样式规则，因此您可能需要进行不同的调整以使所有内容完美排列，但这就是我想出来的。

Altogether now

现在：

<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/

的示例

Answer 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>

Answer 4

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

粗略地，http://jsfiddle.net/vP7As/1/

Answer 5

这是一个解决方案。 no table，no jquery，只需在第一个p

中添加一个lable代码

Demo in fiddle

在safari 15，firefox 6和ie8中测试过。

我认为你应该为计算设置一个line-weigh。例如，我设置了18px，以便<ol><li>3 99...</ol>中的整个高度为(18+5+5)*4=112px（你的li：填充高度为2个5px），然后添加一个p标记，方便position控制。

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;
}

Answer 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>

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

Answer 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
}

Answer 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>

使用textarea和标签排列值列表

8 个答案:

一些JQuery