ما هو أفضل طريقة دلالية لإقامة استراحة في نافبر القائم على UL؟

Question

أقوم بإنشاء نافبار أفقي يستند إلى UL، لكنني أرغب في أن يكون مستويين متجها في كل عنصر، مثل هذا مثل هذا:

     Nav item1            Nav item2             Nav item3
Nav item1 subtitle    Nav item2 subtitle    Nav item3 subtitle

يجب أن يكون العنوان الفرعي بأسلوب مختلف على عنصر التنقل الرئيسي. فعلت هذا أولا (ساذج؟) باستخدام AP المتداخلة داخل LI، ولكن W3C. قال أنا لم أستطع عش AP داخل لي.

في الأساس، أحاول تجنب BR، أساسا لأن هذه ليست دلالات مناسبة هي؟ هل سأذهب في هذه الطريقة الخطأ؟

تحرير: يجب أن أضاف، أريد عنصر NAV والترجمة الفرعية في نفس علامة المرساة، لأنها رابط واحد (وأريد ج a: حرك في العمل). هذا يمنع استخدام علامات العناوين المتعددة داخل لي أعتقد.

تحرير 2: الإجابات كانت مفيدة، شكرا. شيء مثير للاهتمام أن نلاحظ - على الرغم من أنه قيل أن الكتلة تمتد == DIV، فهذا ليس الطريقة التي يراهها منصة W3C. يمكنك دائما الحصول على SPAN متداخلة داخل مرساة، حتى إذا كانت شاشة العرض SPAN: Block، لكنك لا تستطيع أن تكون لديك شاشة عرض: مضمنة H1 داخل مرساة، لأن Validator لا يتحقق من ملفات CSS و HTML معا.

Answer 1

يمكنك استخدام span منذ هذا الخامل الدليلي، ثم أسلوبه display: block.

Answer 2

ذلك هو رايي <br /> مناسبة دلالة لسحب خط فصل العنوان والترجمة الفرعية. يمكنك أن تسميها بشكل مختلف باستخدام <span>.

Answer 3

يجب عليك استخدام قائمة القاموس بدلا من قائمة عادية غير مرتبة. يجب أن يكون مثالك.

<dl>
  <dt>
    Nav Item 1
  </dt>
  <dd>
    Nav Item 1 Subtitle
  </dd>
  <dt>
    Nav Item 2
  </dt>
  <dd>
    Nav Item 2 Subtitle
  </dd>
  <dt>
    Nav Item 2
  </dt>
  <dd>
    Nav Item 2 Subtitle
  </dd>
</dl>

أو في HTML5 أو XHTML 2.0 يمكنك القيام به

<dl>
  <di>
    <dt>
      Nav Item 1
    </dt>
    <dd>
      Nav Item 1 Subtitle
    </dd>
  </di>
  <di>
    <dt>
      Nav Item 2
    </dt>
    <dd>
      Nav Item 2 Subtitle
    </dd>
  </di>
  <di>
    <dt>
      Nav Item 2
    </dt>
    <dd>
      Nav Item 2 Subtitle
    </dd>
  </di>
</dl>

Answer 4

1. تمتد مع العرض: Block == Div

2. u003Cli style=";text-align:right;direction:rtl">u003Ch3 style=";text-align:right;direction:rtl">لقبu003C/h3>u003Ch4 style=";text-align:right;direction:rtl"> العنوان الفرعي.u003C/h4>u003C/li>

(أو أي من علامات H الأخرى المحتملة.