W3C Validation: Bestellliste Element innerhalb Etikett

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

Frage

In Anbetracht der Tatsache, dass <label> und <span> sind Inline-Elemente und <ol> ist ein Blockelement, was ist der richtige Weg, um Nest einer <ol> innerhalb einer Spanne / label w / o mit einem Skript? 

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>

Das Ziel ist es, eine automatisierte geordnete Liste zu haben, die auf JavaScript nicht abhängig ist, die auch W3C XHTML gültig betrachtet wird.

War es hilfreich?

Lösung

Sie könnte verwenden, um einen Image-Map (map) Ihre Liste enthält, aber das kann den map Tag missbrauchen.

Was ich sage, ist so etwas wie die folgenden: 

<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: W3C besagt, dass die map Attribut ist auf Blockebene:

  

Das MAP-Element-Content-Modell erlaubt   Autoren folgendes kombinieren:

     
  1. Ein oder mehr AREA-Elemente.   Diese Elemente haben keinen Inhalt, sondern   geben die geometrischen Bereiche der   Bild Karte und die Verbindung im Zusammenhang mit   jede Region. Beachten Sie, dass Benutzeragenten tun   nicht allgemein AREA Elemente machen.   Daher müssen Autoren liefern   Alternativtext für jeden Bereich mit der   Alt-Attribut (siehe unten   Informationen darüber, wie zu spezifizieren   Alternativtext).
  2. auf Blockebene   Inhalt. Dieser Inhalt sollte A enthalten   Elemente, die die geometrischen angeben   Bereiche des Bildes Karte und Link   mit jeder Region assoziiert. Beachten Sie, dass   der User-Agent sollte machen   Block-Gehalt eines MAP-Element.   Autoren sollten diese Methode verwenden, um   Erstellen zugängliche Dokumente.
    3.   

Andere Tipps

Da niemand antwortet Ich werde einen Stich nehmen:

manuell die Liste erstellen, Spannweiten

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

Jeder Ort, den Sie eine ol{...} oder li{...} im CSS sehen, werden Sie die Klasse einfügen müssen; ol,.ol{...} und li,.li{...}. Zusätzlich würde .ol wahrscheinlich display:block;

haben müssen

Die Zeilenumbrüche wahrscheinlich durch eine klare ersetzt werden könnten, aber das ist alles aus der Spitze von meinem Kopf, w / o testen. 

<!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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top