كيفية محاذاة قائمة غير مرتبة في HTML

المحتوى

• الاتجاهات

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

الاتجاهات

استخدم كود CSS لمحاذاة القوائم غير المرتبة في HTML (كوكب المشتري / Photos.com / غيتي إيماجز)

1. افتح ملف HTML الذي يحتوي على قائمة غير مرتبة وانظر خلال العلامات و ، في الجزء العلوي من التعليمات البرمجية. إضافة علامات> و إذا لم تكن موجودة بالفعل. إذا كان رمزك يتضمن علامة

2. في مكان ما بعد ذلك ، ويحتوي على إشارة إلى ملف CSS ، افتح هذا الملف. سينتقل كود CSS الخاص بك بين> و أو في سطر جديد من ملف CSS الخاص بك.

3. قم بمحاذاة النص داخل الإشارات المرجعية عن طريق تعيين خاصية "محاذاة النص" للعلامة

   . هذا ينطوي على العلامات
   • و
   لتعريفهم كجزء من قائمة واحدة. عند محاذاة النص في العلامة
   ، ستتأثر جميع العناصر في القائمة ، ولكن ليس في القائمة نفسها ، على يمين الصفحة أو يسارها. مثال على استخدام كود CSS لتعيين خاصية "محاذاة النص" ، استخدم "ul {text-align: right؛}". لاحظ أن العلامات لن تتحرك مع النص. في هذه الحالة ، سيكونون على اليسار.

4. قم بمحاذاة القائمة بأكملها إلى يسار أو يمين الصفحة من خلال تعيين خاصية "التعويم" للعلامة الخاصة بك

   . تؤثر هذه الخاصية على القائمة بأكملها عن طريق نقلها إلى يسار أو يمين الصفحة. اكتب الكود "ul {float: right؛}".

   يمكنك تعيين هذه الخاصية إلى اليسار أو اليمين ، ولكن ليس في الوسط.

   
   

5. مغلف العلامات الخاصة بك

   مع العلامات وإنشاء التفاف من شأنها أن تركز القائمة على الصفحة. سيبدو الرمز هكذا: "
   • عنصر القائمة
   • عنصر القائمة
   '.

   العلامة لن محاذاة أي شيء في حد ذاته. يجب عليك استخدام CSS لتوسيط كل شيء. أضف الكود التالي بين العلامات> أو في ملف CSS لتوسيط القائمة: "div {display: block؛ text-align: center؛} ul {display: inline-block؛ text-align: left؛}".