代码之家 › 专栏 › 技术社区 › vol7ron

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

html-validation xhtml-transitional xhtml html

1

vol7ron · 技术社区 · 15 年前

考虑到 <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,而JavaScript也被认为是W3C XHTML有效的。

3 回复 | 直到 8 年前

1

0

Kevin Ji 15 年前

你能够使用图像映射( 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 属性为块级别:

地图元素内容模型允许作者应结合以下内容:

一个或多个区域元素。这些元素没有内容,但是指定图像映射和与每个地区。注意,用户代理可以通常不渲染区域元素。因此,作者必须提供每个区域的替换文本 alt属性(有关有关如何指定的信息替换文本)。

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

2

0

vol7ron 15 年前

既然没人接,我就试试看:

使用跨度手动创建列表

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

你看到的每一个地方 ol{...} 或 li{...} 在CSS中,必须插入类; ol,.ol{...} 和 li,.li{...} . 另外, .ol 可能需要 display:block;

断线可能会被一个清晰的代替,但这完全是我的头绪,没有测试。

3

0

cassidymack 15 年前

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