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有効とも見なされます。

役に立ちましたか？

解決

君 たぶん......だろう イメージマップを使用します（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. 1つ以上のエリア要素。これらの要素には内容はありませんが、画像マップの幾何学的領域と各領域に関連付けられたリンクを指定します。ユーザーエージェントは一般に領域要素をレンダリングしないことに注意してください。したがって、著者は、各領域の代替テキストをAlt属性を備えた代替テキストを提供する必要があります（代替テキストを指定する方法については、以下を参照してください）。
  2. ブロックレベルのコンテンツ。 このコンテンツには、画像マップの幾何学的領域と各領域に関連付けられたリンクを指定する要素を含める必要があります。ユーザーエージェントは、MAP要素のブロックレベルコンテンツをレンダリングする必要があることに注意してください。著者は、この方法を使用して、よりアクセスしやすいドキュメントを作成する必要があります。

他のヒント

誰も答えていないので、私は刺します：

スパンを使用して、リストを手動で作成します

   <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