W3C 验证：标签内的有序列表元素

问题描述 投票：0回答：3

鉴于 

<label>
和 
<span>
是内联元素，而 
<ol>
是块元素，那么在不使用脚本的情况下将 
<ol>
嵌套在跨度/标签内的正确方法是什么？

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 有效的。

html xhtml w3c-validation xhtml-transitional
3个回答
0
投票

您可以使用图像映射 (

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 元素内容模型允许 作者结合以下内容：

  1. 一个或多个 AREA 元素。 这些元素没有内容，但是 指定几何区域 图像映射和关联的链接 每个地区。请注意，用户代理会 通常不渲染 AREA 元素。 因此，作者必须提供 每个区域的替代文本 alt 属性（参见下文 有关如何指定的信息 替代文本）。
  2. 块级 内容。 该内容应包括 A 指定几何元素 图像映射的区域和链接 与每个区域相关。注意 用户代理应该呈现 MAP 元素的块级内容。 作者应该使用此方法 创建更易于访问的文档。
0
投票

既然没有人回答，我就尝试一下：

使用 span 手动创建列表

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

换行符可能会被替换为清晰的，但这都是我的想法，没有测试。

0
投票
<!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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.