Question

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

目标是拥有一个自动排序列表，该列表不依赖于JavaScript，也被视为W3C XHTML有效。

Answer 1

由于没有人回答我会采取刺伤：

使用跨度

手动创建列表

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

在CSS中看到ol{...}或li{...}的每个地方，您都必须插入课程; ol,.ol{...}和li,.li{...}。此外，.ol可能需要display:block;

换行符可能会被清除所取代，但这完全不是我的头脑，没有测试。

Answer 2

您可以使用图片地图（map）来包含您的列表，但这可能会滥用map标记。

我所说的是以下内容：

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

编辑：W3C声明map属性是块级别：

MAP元素内容模型允许   作者将以下内容结合起来：


一个或多个AREA元素。   这些元素没有内容，但   指定的几何区域   图像映射和与之关联的链接   每个地区。请注意，用户代理可以   通常不会渲染AREA元素。   因此，作者必须提供   每个AREA的替代文本   alt属性（见下面的   有关如何指定的信息   替代文字）。

块级   内容。此内容应包括A.   指定几何的元素   图像映射的区域和链接   与每个地区相关联。注意   用户代理应该呈现   MAP元素的块级内容。   作者应该使用这种方法   创建更易于访问的文档。

Answer 3

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

W3C验证：Label中的有序列表元素

3 个答案:

使用跨度