يتم ترتيب معظم قضبان التنقل أفقياً كما هو موضح في الشكل أدناه ، فكيف يتم تحقيق ذلك؟ في الواقع ، يستخدم بشكل أساسي الترتيب الأفقي لـ Li في علامة <ul>. فيما يلي مثال لشرح بالتفصيل كيف يتم تنفيذه.
1. اكتب مخطط رمز HTML الأفقي<ul id = menu> <li> <a href = http: //www.baidu.com> baidu.com </a> </li> <li> <a href = // www.vevb.com> <li> <a href = http: //www.google.com class = last> Google.com </a> </li> </ul>2 كتابة رمز CSS
<1> اضبط النمط المشترك
<type type = text/css> #menu {font: 12px verdana ، arial ، sans-serif ؛ /* تعيين حجم النص ونمط الخط*/ العرض: 100 ٪ ؛ } #menu ، #menu li {style-style: none ؛ / * قم بإزالة رمز القائمة الافتراضية */ padding: 0 ؛ / * إزالة الهامش الداخلي الافتراضي */ الهامش: 0 ؛ / * إزالة الهامش الخارجي الافتراضي */ تعويم: اليسار ؛ /* تعويم إلى اليسار*/ العرض: Block ؛}<2> تعيين نمط الرابط
<type type = text/css> #menu li a {display: block ؛ /* اضبط الرابط بعنصر مستوى الكتلة*/ العرض: 150px ؛ /* اضبط العرض*/ الارتفاع: 30 بكسل ؛ /* قم بتعيين الارتفاع*/ خط الارتفاع: 30px ؛ /* قم بتعيين ارتفاع الخط ، وضبط نفس القيمة لارتفاع الخط والارتفاع ، بحيث يمكن تركيز سطر واحد من النص رأسياً*/ text-align: Center ؛ /* مركز محاذاة النص*/ الخلفية:#3A4953 ؛ /* اضبط لون الخلفية*/ اللون: #fff ؛ /* اضبط لون النص*/ decoration النص: لا شيء ؛ /* قم بإزالة السطح السفلي*/ الحدود اليمين: 1 بكسل Solid #000 ؛ / * أضف مقسمًا على اليسار */} </style><3> رابط تحوم تأثير
<type type = text/css> #menu li a: hover {background: #146c9c ؛ /* تغيير لون الخلفية*/ اللون: #ffff ؛ /* تغيير لون النص*/} </style><4> قم بإزالة المربع الأيمن من شريط التنقل في أقصى اليسار
<type type = text/css> #menu li A.Last {border-right: 0 ؛ /* قم بإزالة الحدود اليسرى*/} </style>3 رمز كامل
<! doctype html> <html> <head> <meta charset = utf-8> <title> تأثير موجه الصورة </title> <script src = ../jquery-33.3.1.min.js> </script> <style type = text/css> #menu {font: 12px verana ، arial ، sans-serif ؛ /* تعيين حجم النص ونمط الخط*/ العرض: 100 ٪ ؛ } #menu ، #menu li {style-style: none ؛ / * قم بإزالة رمز القائمة الافتراضية */ padding: 0 ؛ / * إزالة الهامش الداخلي الافتراضي */ الهامش: 0 ؛ / * إزالة الهامش الخارجي الافتراضي */ تعويم: اليسار ؛ /* تعويم اليسار*/ العرض: كتلة ؛ } #menu li a {display: inline block ؛ /* اضبط الرابط بعنصر مستوى الكتلة*/ العرض: 150px ؛ /* اضبط العرض*/ الارتفاع: 30 بكسل ؛ /* قم بتعيين الارتفاع*/ خط الارتفاع: 30px ؛ /* قم بتعيين ارتفاع الخط ، وضبط نفس القيمة على ارتفاع الخط وارتفاعه ، بحيث يمكن تركيز سطر واحد من النص رأسياً*/ text-align: Center ؛ /* مركز محاذاة النص*/ الخلفية:#3A4953 ؛ /* اضبط لون الخلفية*/ اللون: #fff ؛ /* اضبط لون النص*/ decoration النص: لا شيء ؛ /* قم بإزالة السطحية*/ الحدود اليمين: 1px Solid #000 ؛ / * إضافة مقسم على اليسار */} #Menu li A: Hover {Background: #146C9C ؛ /* تغيير لون الخلفية*/ اللون: #FFF ؛ /* تغيير لون النص*/} #Menu li A.Last {الحدود اليمين: 0 ؛ /* قم بإزالة الحدود اليسرى*/} </style> </head> <body> <ul id = menu> <li> <a href = http: //www.baidu.com> baidu.com </a> </li> <li> <li> <a href = // www.vevb.com> jb51.net </a> href = http: //www.yahoo.com> yahoo.com </a> </li> <li> <a href = http: //www.google.com class = last> google.com </a> </li> </ul> </body> </html>تشغيل عبر الإنترنت
نصيحة: يمكنك تعديل بعض التعليمات البرمجية أولاً ثم تشغيله
باختصار ، فإن الشيء الأكثر ضرورة لجعله يرتب أفقيًا هو: النمط الرئيسي لعلامة <UI> هو عرض: بالوك ؛
النمط الرئيسي لـ <li> هو العرض: inline-balock ، تعويم: اليسار ، على الطريقة: لا شيء ؛
هذه هي المقالة حول مثال التنفيذ للترتيب الأفقي LI في العلامات في HTML. لمزيد من محتوى الترتيب الأفقي HTML LI ، يرجى البحث في المقالات السابقة من wulin.com أو المقالات التالية ذات الصلة. آمل أن يدعم الجميع wulin.com في المستقبل!