製作值列表排隊用一個textarea和標籤

Question

下面是一些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」 」。

Answer 1

這是一個很好的情況下，對CSS的定位。具有position:absolute的元素相對於它們最接近的位置親本定位於。這意味着我們可以使用標籤上的<ol>和position:absolute上的position:relative將標籤錨定到其容器的頂部/左側。

這裏舉例：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 2

從textarea中刪除邊框和填充並將其設置爲相同的字體。

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

Answer 3

垂直對齊不聯元素工作，但確實在表工作（more details on vertical-align）。

所以，這裏有一個解決方案：我只是將第一個li中的兩個主要元素封裝在一個表格行中，並將垂直對齊設置爲底部以強制「最近的數據」標籤位於底部。 （有可能是使用display屬性將li從一個內聯元素改變一些方式？）

您還需要調整對ol填充和label S和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 4

一些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> 

Answer 5

這裏是一個解決方案。 no table，no jquery，只是在第一lable

Demo in fiddle

在Safari 15，火狐6和IE8測試添加一個p標籤。

我想你應該設置一個line-weigh爲計算。在例子中，我設置了18px，這樣<ol><li>3 99...</ol>的整個高度就是(18+5+5)*4=112px（兩個5px爲你的li：填充高度），然後添加一個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

如果你想讓東西像表格一樣行爲，就像表格一樣顯示它。使用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 8

垂直對齊可與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 
}