Валидация W3C: Указанный элемент списка внутри этикетки

StackOverflow https://stackoverflow.com/questions/4286674

Вопрос

Учитывая тот факт, что <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.

Это было полезно?

Решение

Ты мог Используйте ImageAmap (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 Атрибут - это уровень блока:

Модель содержимого элемента карты позволяет авторам объединить следующее:

  1. Один или несколько элементов области. Эти элементы не имеют содержания, но указывают геометрические области карты изображения и ссылку, связанные с каждым регионом. Обратите внимание, что пользовательские агенты обычно не представляют элементы области. Следовательно, авторы должны предоставлять альтернативный текст для каждой области с атрибутом ALT (см. Ниже для получения информации о том, как указать альтернативный текст).
  2. Контент уровня блока. Этот контент должен включать элементы, указывающие геометрические области карты изображения и ссылку, связанные с каждым регионом. Обратите внимание, что пользовательский агент должен рендерировать контент уровня блока элемента карты. Авторы должны использовать этот метод для создания более доступных документов.

Другие советы

Поскольку никто не отвечает, я сделаю удар:

Вручную создать список, используя пролеты

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

Перерывы линий, вероятно, могут быть заменены четкой, но это все в верхней части моей головки, без тестирования.

<!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 с атрибуция
Не связан с StackOverflow
scroll top