Проверка W3C: упорядоченный элемент списка внутри метки - PullRequest
Новая
       28

Проверка W3C: упорядоченный элемент списка внутри метки

1 голос
/ 26 ноября 2010

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

Ответы [ 3 ]

0 голосов
/ 14 апреля 2011

Вы можете использовать карту изображений (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" />

EDIT: W3C утверждает, что атрибут map является уровнем блока:

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

  1. Один или несколько элементов AREA. Эти элементы не имеют никакого содержания, кроме указать геометрические области карта изображения и ссылка, связанная с каждый регион. Обратите внимание, что пользовательские агенты делают обычно не отображает элементы AREA. Поэтому авторы должны предоставить альтернативный текст для каждой области с атрибут alt (см. ниже для информация о том, как указать альтернативный текст).
  2. Уровень блока содержание. Это содержание должно включать A элементы, которые определяют геометрические области изображения карты и ссылки связан с каждым регионом. Обратите внимание, что пользовательский агент должен сделать содержимое уровня блока элемента MAP. Авторы должны использовать этот метод для создавать более доступные документы.
0 голосов
/ 05 сентября 2011 
<!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 голосов
/ 29 ноября 2010

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

Создать список вручную, используя 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;

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

...