W3C验证：标签内的有序列表元素
[英]W3C Validation: Ordered List element inside Label
问题描述
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? 
考虑到<label>和<span>是内联元素，而<ol>是一个块元素，使用脚本将<ol>嵌套在不包含span / label的正确方法是什么？
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. 目标是要有一个不依赖JavaScript的自动排序列表，该列表也被视为W3C XHTML有效。
3 个解决方案
解决方案1
0 2010-11-29 18:58:20
Since no one is answering I'll take a stab: 由于没有人在回答，因此我会采取行动：
Manually create the list, using spans 使用跨度手动创建列表
<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>
Every place you see an ol{...} or li{...} in the CSS, you'll have to insert the class; 在CSS中看到ol{...}或li{...}每个地方，都必须插入该类； ol,.ol{...} and li,.li{...} . ol,.ol{...}和li,.li{...} 。 Additionally, .ol would probably need to have display:block; 此外， .ol可能需要具有display:block;
The line breaks could probably be replaced by a clear, but this is all off the top of my head, w/o testing. 换行符可能会被清除掉，但是，这完全是我的头上，没有测试。
解决方案2
0 已采纳 2011-04-14 17:52:39
You could use an imagemap ( map ) to contain your list, but that may be abusing the map tag. 您可以使用imagemap（ map ）来包含列表，但这可能会滥用map标签。
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: 编辑：W3C指出map属性是块级别：
The MAP element content model allows authors to combine the following:
- One or more AREA elements.
- Block-level content.
解决方案3
0 2011-09-04 20:57:49
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.