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

发布于 2024-10-04 18:21:46 字数 1130 浏览 9 评论 0原文

鉴于和是内联元素，而

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

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

十年九夏 2024-10-11 18:21:46

您可以使用图像映射(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 元素。
因此，作者必须提供
每个区域的替代文本
alt 属性（参见下文
有关如何指定的信息
替代文本）。
块级
内容。此内容应包含 A
指定几何元素
图像映射的区域和链接
与每个区域相关。注意
用户代理应该呈现
MAP 元素的块级内容。
作者应该使用此方法
创建更易于访问的文档。

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.

回复收藏 0 原文

司马昭之心 2024-10-11 18:21:46

由于没有人回答，我将尝试一下：

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

在您看到 ol{...} 或 li{...} 在 CSS 中，您必须插入类； ol,.ol{...} 和 li,.li{...}。此外，.ol可能需要有display:block;

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

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; ol,.ol{...} and li,.li{...}. Additionally, .ol would probably need to have 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.

回复收藏 0 原文

情感失落者 2024-10-11 18:21:46

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

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

回复收藏 0 原文

~没有更多了~