التحقق من صحة W3C: عنصر قائمة مرتبة داخل التسمية

https://stackoverflow.com/questions/4286674

28-09-2019
|

سؤال

نظرا لحقيقة أن <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 صالحة.

المحلول

أنت استطاع استخدم ImageMap (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 السمة هي مستوى الكتلة:

يتيح نموذج محتوى عنصر الخريطة للمؤلفين الجمع بين ما يلي:

عناصر منطقة واحدة أو أكثر. لا تحتوي هذه العناصر على محتوى ولكن تحدد المناطق الهندسية لخريطة الصورة والرابط المرتبط بكل منطقة. لاحظ أن وكلاء المستخدمين لا يقدمون عمومًا عناصر المنطقة. لذلك ، يجب على المؤلفين توفير نص بديل لكل منطقة مع سمة ALT (انظر أدناه للحصول على معلومات حول كيفية تحديد نص بديل).

محتوى مستوى الكتلة. يجب أن يتضمن هذا المحتوى عناصر تحدد المناطق الهندسية لخريطة الصورة والرابط المرتبط بكل منطقة. لاحظ أنه يجب على وكيل المستخدم تقديم محتوى على مستوى الكتلة لعنصر خريطة. يجب على المؤلفين استخدام هذه الطريقة لإنشاء مستندات يمكن الوصول إليها أكثر.

نصائح أخرى

بما أنه لا أحد يجيب ، فسأخذ طعنة:

قم بإنشاء القائمة يدويًا باستخدام الفترات

   <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