Validación del W3C: Lista ordenada elemento dentro de la etiqueta

StackOverflow https://stackoverflow.com/questions/4286674

Pregunta

Teniendo en cuenta el hecho de que <label> y <span> son elementos en línea y <ol> es un elemento de bloque, ¿cuál es la forma correcta de un nido <ol> dentro de un lapso / etiqueta w / o utilizando un script? 

input { vertical-align: top; }
label { display: block; }
label + label { margin-top: 1em; }
ol { padding:0; margin:0; }
<label for="foo">
   <input id="foo" type="checkbox" />
   <span style="padding-left: 1em; display:inline-block;">
      <ol>
         <li>Boat</li>
         <li>Jet</li>
         <li>Chopper</li>
      </ol>
   </span>
</label>

<label for="bar">
   <input id="bar" type="checkbox" />
   <span style="padding-left: 1em; display:inline-block;">
      <ol>
         <li>Car</li>
         <li>Auto</li>
      </ol>
   </span>
</label>

El objetivo es tener una lista ordenada automatizado, que no depende de JavaScript, que también se considera W3C XHTML válido.

¿Fue útil?

Solución

podría usar un mapa de imágenes (map) para contener su lista, sino que pueden ser abusar de la etiqueta map.

Lo que estoy diciendo es algo como lo siguiente: 

<label for="foo" style="padding:1em;display:inline-block;">
  <map id="foolist">
       <ol>
          <li>1</li>
          <li>2</li>
          <li>3</li>
       </ol>
  </map>
</label>
<input name="foo" id="foo" type="checkbox" />

EDIT: estados del W3C que el map atributo es a nivel de bloque:

  

El modelo de contenido elemento MAP permite   autores combinan a la siguiente:

     
  1. Uno o más elementos AREA.   Estos elementos no tienen ningún contenido, sino   especificar las regiones geométricas de la   mapa de imagen y el enlace asociado con   cada región. Tenga en cuenta que aplicaciones de usuario lo   por lo general no hacen los elementos AREA.   Por lo tanto, los autores deben proporcionar   texto alternativo para cada zona con la   atributo alt (ver más abajo para   información sobre cómo especificar   texto alternativo).
  2. a nivel de bloque   contenido. Este contenido debe incluir una   elementos que especifican el geométrica   regiones del mapa de imagen y el enlace   asociado con cada región. Tenga en cuenta que   el agente de usuario debe hacer   contenido en bloque de un elemento de MAP.   Los autores deben utilizar este método para   crear documentos más accesibles.
    3.   

Otros consejos

Ya que nadie está contestando Voy a tomar una puñalada:

Crear manualmente la lista, utilizando tramos 

   <label for="foo">
      <span style="padding:1em;display:inline-block;">
         <span class="ol">
            <br /><span class="li">1. 1</span>
            <br /><span class="li">2. 2</span>
            <br /><span class="li">3. 3</span>
         </span>
      </span>
   </label>

En cada lugar se ve un ol{...} o li{...} en el CSS, tendrá que insertar la clase; ol,.ol{...} y li,.li{...}. Además, .ol probablemente tendría que tener display:block;

Los saltos de línea, probablemente podrían ser reemplazados por un claro, pero esto es todo de la parte superior de mi cabeza, w / o pruebas. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>foo</title>

<style type="text/css">
/*<![CDATA[*/
 span.c1 {padding:1em;display:inline-block;}
/*]]>*/
</style>
</head>
<body>
<ol>
<li><label for="foo"><span class="c1">1</span></label></li>
<li><label for="foo"><span class="c1">2</span></label></li>
<li><label for="foo"><span class="c1">3</span></label></li>
</ol>
</body>
</html>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top