Given the fact that <label>
and <span>
are inline elements and <ol>
is a block element, what is the proper way to nest an <ol>
inside a span/label w/o using a 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>
The goal is to have an automated ordered list, which is not dependent on JavaScript, which is also considered W3C XHTML valid.
You could use an imagemap (map
) to contain your list, but that may be abusing the map
tag.
What I'm saying is something like the following:
<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 states that the map
attribute is block level:
The MAP element content model allows authors to combine the following:
- One or more AREA elements. These elements have no content but specify the geometric regions of the image map and the link associated with each region. Note that user agents do not generally render AREA elements. Therefore, authors must provide alternate text for each AREA with the alt attribute (see below for information on how to specify alternate text).
- Block-level content. This content should include A elements that specify the geometric regions of the image map and the link associated with each region. Note that the user agent should render block-level content of a MAP element. Authors should use this method to create more accessible documents.