状況：
複数のページにわたる質問の長いリストを含むサイトがあります。
各質問は、ラベルと入力で構成されています。質問 div のグループは、追加の div 内にあり、グループ化やボーダー スタイルなどを提供します。
問題：
質問に番号を付けたいのですが、番号付けのハードコーディングは避けたいです。<li>ただし、 をdiv またはラベル内に配置するのは無効な htmlです。
さらに、一部の質問 div は、ユーザー入力に応じて条件付きで非表示または表示されます。したがって、div は重要な機能を提供し、数字はこれらの div とともに非表示および表示する必要があります (そのため、それぞれ<li>を div の外側に配置すると問題が発生します。
コード：
これは、2 つの質問「ブロック」を示す、私のフォームの簡素化された構造の例です。
<form id="myform" method="post" action="/destinaion/page.php">
<div class="formfield">
<div class="page1">
<div class="lowerborder">
<div class="question">
<label for="q2">Question 1</label>
<input type="number" id="q1" name="q1"/>
</div>
<div class="question">
<label for="q1">Question 2</label>
<input type="number" id="q2" name="q2"/>
</div>
</div>
</div>
</div>
</form>
div クラスのフォーム フィールドにはフォーム ページが含まれ、page1 にはページ 1 のさまざまなスタイリングの詳細が含まれます。
質問から順序付きリストを作成したいのですが、おそらく次のようなものです
目標達成の試み:
<form id="myform" method="post" action="/destination/page.php">
<div class="formfield">
<ol>
<div class="page1">
<div class="lowerborder">
<div class="question">
<label for="q2"><li>Question 1</li></label>
<input type="number" id="q1" name="q1"/>
</div>
<div class="question">
<label for="q1"><li>Question 2</li></label>
<input type="number" id="q2" name="q2"/>
</div>
</div>
</div>
</ol>
</div>
</form>
しかし、ご覧のとおり、a) 有効な html ではなく、b) すべてのブラウザーでうまく動作しない を<li>入れています。<label>
<li>リスト項目が多数のネストされた div で区切られている場合、無効な親内に要素を配置しないようにするにはどうすればよいですか?
jsFiddle:
上記の試行のフィドルを参照してください。私が達成しようとしているいくつかのスタイリングと機能を含めます（ネストされたdivによるスタイリング、明らかにする隠された質問など）
