Validazione W3C: Elenco ordinato elemento all'interno Label

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

Domanda

Dato che <label> e <span> sono elementi in linea e <ol> è un elemento di blocco, qual è il modo corretto di nido un <ol> all'interno di un intervallo / etichetta w / o utilizzando uno 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>

L'obiettivo è quello di avere una lista ordinata automatizzato, che non dipende da JavaScript, che è anche considerato W3C XHTML valido.

È stato utile?

Soluzione

potrebbero usare una mappa immagine (map) per contenere la vostra lista, ma che può essere abusando il tag map.

Quello che sto dicendo è qualcosa di simile al seguente: 

<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: stati W3C che il map attributo è livello di blocco:

  

Il contenuto elemento del modello MAP consente   autori di combinare le seguenti:

     
  1. Uno o più elementi AREA.   Questi elementi non hanno alcun contenuto, ma   indicare le regioni geometriche della   mappa immagine e il collegamento associato con   ciascuna regione. Nota che i programmi utente fanno   Non generalmente rendering elementi AREA.   Pertanto, gli autori devono fornire   testo alternativo per ogni area con la   attributo alt (vedi sotto per   informazioni su come specificare   testo alternativo).
  2. a livello di blocco   contenuti. Questo contenuto dovrebbe includere un   elementi che specificano la geometrica   regioni della mappa immagine e il link   associata a ciascuna regione. Nota che   l'utente dovrebbe rendere   contenuto a livello di blocco di un elemento MAP.   Gli autori dovrebbero utilizzare questo metodo per   creare documenti più accessibili.
    3.   

Altri suggerimenti

Dal momento che nessuno sta rispondendo mi prendo una pugnalata:

creare manualmente l'elenco, con campate 

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

Ogni luogo si vede un ol{...} o li{...} nel CSS, dovrete inserire la classe; ol,.ol{...} e li,.li{...}. Inoltre, .ol sarebbe probabilmente bisogno di avere display:block;

Le interruzioni di linea potrebbero probabilmente essere sostituiti da un chiaro, ma questo è tutto fuori dalla parte superiore della mia testa, w / o test. 

<!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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top