اجرا ❯
بازگشت
به
آموزشگاه
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html dir="rtl"> <head> <style> .nav { background-color: yellow; list-style-type: none; text-align: center; margin: 0; padding: 0; } .nav li { display: inline-block; font-size: 20px; padding: 20px; } </style> </head> <body> <h1>منوی لینک های افقی</h1> <p>به طور پیش فرض، آیتم های لیست(list) به صورت عمودی نشان داده می شوند. در این مثال، ما از دستور display: inline-block برای نمایش دادن آنها به صورت افقی (در کنار یکدیگر) استفاده کرده ایم. </p> <p>نکته: اگر پنجره ی مرورگر را تغییر اندازه دهید، وقتی که پنجره کوچک می شود و به لینک ها فشار وارد می شود، خط لینک ها می شکند. </p> <ul class="nav"> <li><a href="#home">خانه</a></li> <li><a href="#about">درباره ما</a></li> <li><a href="#clients">تماس با ما</a></li> <li><a href="#contact">خدمات</a></li> </ul> </body> </html>
