W3C Validation: Liste des éléments de commande à l'intérieur Étiquette

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

Question

Compte tenu du fait que <label> et <span> sont des éléments en ligne et <ol> est un élément de bloc, ce qui est la bonne façon de imbriquer un <ol> intérieur d'une portée / étiquette w / o en utilisant 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>

Le but est d'avoir une liste ordonnée automatisée, ce qui ne dépend pas de JavaScript, qui est également considéré W3C XHTML valide.

Était-ce utile?

La solution

peut utiliser une hyperimage (map) pour contenir votre liste, mais peut-être abuser de la balise map.

Ce que je veux dire quelque chose comme ce qui suit: 

<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: Etats W3C que le map attribut est le niveau de bloc:

  

Le modèle de contenu de l'élément MAP permet   auteurs de combiner les éléments suivants:

     
  1. Un ou plusieurs éléments de la région.   Ces éléments ont pas de contenu, mais   spécifier les régions géométriques de la   plan d'image et le lien associé à   chaque région. Notez que les agents utilisateurs   ne rend généralement des éléments AREA.   Par conséquent, les auteurs doivent fournir   texte alternatif pour chaque zone avec les   attribut alt (voir ci-dessous   informations sur la façon de spécifier   texte alternatif).
  2. Bloc-niveau   contenu. Ce contenu devrait inclure une   des éléments qui spécifient le géométrique   les régions de la carte d'image et le lien   associé à chaque région. Notez que   l'agent utilisateur doit rendre   contenu au niveau du bloc d'un élément de MAP.   Les auteurs devraient utiliser cette méthode pour   créer des documents plus accessibles.
    3.   

Autres conseils

Puisque personne ne répond que je vais prendre un coup de poignard:

Créer manuellement la liste, en utilisant des portées 

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

Chaque endroit que vous voyez un ol{...} ou li{...} dans le CSS, vous devrez insérer la classe; ol,.ol{...} et li,.li{...}. En outre, .ol aurait probablement besoin d'avoir display:block;

Les sauts de ligne pourraient probablement être remplacées par une vision claire, mais tout cela est du haut de ma tête, 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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top