Navigation Bar افقی

دو راه برای ساخت Navigation Bar افقی وجود دارد. استفاده از لیست های inline یا floating

هر دو روش بخوبی کار خواهد کرد، اما اگر می خواهید لینک ها، اندازه یکسان داشته باشند باید از روش floating استفاده کنید.

لیست های inline

یک راه برای ساخت navigation bar افقی این است که عناصر <li> را به صورت inline مشخص کنیم:

مثال (ساخت Navigation Bar افقي)

li
{
display:inline;
}
خودتان امتحان کنید »

توضیح مثال بالا:

  • به صورت پیشفرض یک عنصر <li> تمام فضای یک خط را اشغال می کند، با تنظیم خصوصیت display با مقدار "inline" شکستگی خط قبل و بعد هر لیست حذف خواهد شد، بنابراین تمام عناصر <li> در یک خط نمایش داده می شوند.

برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar افقی

Floating

در مثال بالا، لینک ها عرض های متفاوتی دارند.

برای اینکه تمام لینک ها عرض یکسان داشته باشند، عناصر <li> را float می کنیم و عرض عناصر <a> را تنظیم می کنیم:

مثال (ساخت Navigation Bar افقي)

li
{
float:left;
}
a
{
display:block;
width:60px;
}
خودتان امتحان کنید »

توضیح مثال بالا:

  • در گزینشگر li با تنظیم خصوصیت float با مقدار "left" تمام عناصر <li> در کنار یکدیگر (در یک خط) قرار می گیرند.
  • در گزینشگر a با تنظیم خصوصیت display با مقدار "block" تمام عناصر <a> در یک خط جداگانه قرار می گیرند و تمام فضای لینک قابل کلیک کردن است (نه فقط متن لینک)، و این به ما اجازه می دهد تا عرض لینک را مشخص کنیم.
  • عناصر Block به صورت پیشفرض تمام عرض قابل دسترس را اشغال می کنند. ما می توانیم مشخص کنیم که 60 پیکسل از یک خط را اشغال کند.

برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar افقی

آموزش های مرتبط

آموزش CSS-ساخت منو در CSS