خانه / آموزش کامل CSS / آموزش کامل CSS – قسمت ۱۴: دستور display
آموزش سی اس اس

آموزش کامل CSS – قسمت ۱۴: دستور display

دستور display در css

گاهی اوقات پیش می‌آید که قصد قرار دادن دو المان از نوع بلاک در یک ردیف را داشته باشیم. در این مواقع کار کمی مشکل می شود که ما در این جلسه از آموزش با کمک دستور display این کار را انجام می دهیم.

دستور display نحوه نمایش المان ها را مشخص می کند.

مقدار inline block

همانطور که می‌دانید المان‌های اچ‌تی‌ال غالبا به صورت بلاک و خطی بوده و هر المان یک سطر کامل را اشغال می‌کند. کلمه بلاک در واقع به المان‌هایی مثل <p> یا <div> اطلاق می‌شود. این المان‌ها هیچ چیز دیگری را در کنار خود جای نمی‌دهند. در جلسه قبل ما با استفاده از خاصیت شناور float المان ها در کنار یکدیگر قرار دادیم. امروز با استفاده از display و inline block تمامی المان ها را در یک سطر و کنار یکدیگر قرار می دهیم.

مقدار inline block المان ها را در یک خط کنار هم قرار می دهد. در مثال زیر ۴ جعبه شناور را در کنار یکدیگر قرار می دهیم:

css code

خروجی مثال به صورت زیر نمایش داده می شود:

سی اس اس 14

همان طور که مشاهده می کنید بعد از استفاده از دستور inline-block دیو های ما به صورت شناور در کنار هم و در یک سطر قرار گرفتند.

برای تمرین یک لیست بدون نظم unorderd list ایجاد کنید و  کاری کنید که آیتم‌های لیست به جای اینکه زیر هم قرار بگیرند، در کنار هم قرار بگیرند.

راهنمایی: المان‌ لیست یک المان بلاک است و برای تبدیل یک المان بلاک به المانی که در یک خط قرار بگیرد، از دستور خاصی استفاده می‌کردیم.

درباره ما admin

محمد صفری : مهندس نرم افزار و طراح سایت

این موارد رو هم بررسی کنید

آموزش سی اس اس

آموزش کامل CSS – قسمت دهم: عرض حداکثر در المان ها

در این قسمت از آموزش css قصد داریم تا نحوه تغییر عرض در المان ها …



هنوز هیچ دیدگاهی وجود ندارد

× برای پیوستن به بحث نیاز به ورود دارید