Este es un buen ejemplo para el posicionamiento CSS. Los elementos con position:absolute se ubican en relación con su elemento situado más cercano principal. Eso significa que podemos anclar las etiquetas en la parte superior/izquierda de sus contenedores usando position:relative en el <ol>, y position:absolute en la etiqueta.
Ejemplo aquí: 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;
}
Esto es muy simple para razonar acerca y fiable entre navegadores. Tenga en cuenta que no debe usar un <label> que no tenga un control de formulario correspondiente.
Pero eso se parece a los datos tabulares ... es su elección, que no tienen suficiente contexto para saber qué margen de beneficio es más apropiado. Así que aquí es un enfoque más semánticamente correcto uso de tablas, rowspan y 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;
}
muestra a http://jsfiddle.net/quqf8/1/
¿Alguien puede aconsejarme sobre la etiqueta de recompensas? Quería dárselo a @Bee para saltar y clavarlo dentro de las 24 horas de mi pregunta. Nadie ha mejorado su respuesta en términos de la calidad de lo que se representa, pero se ha superado en términos de la elegancia del código. ¿Puedo, por ejemplo, convertir la solución más elegante en la aceptada, pero otorgar la recompensa en función de la velocidad de respuesta? Quiero decir, sé que puedo, pero ¿qué hay de más en el espíritu de stackoverflow? (Divulgación: Bee y yo somos cohackers en la vida real.) – dreeves
Según tengo entendido, la recompensa se puede dividir y no está vinculada a la respuesta aceptada – HerrSerker
En su código HTML, no debe usar una etiqueta para datos recientes ya que no hay elemento de forma correspondiente. Un span o inline p con exactamente el mismo estilo que la etiqueta de abajo estaría bien (mi nombre preferido es una clase .label_like ^^). Y debe agregar una asociación for/id entre label y textarea, como es habitual para los elementos de formulario asociados con una etiqueta. – FelipeAls