نوشته های برچسب خورده: دستور inline block

دستور display در css

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

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

مقدار inline block

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

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

<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>

css code

.floating-box {
    display: inline-block;
    width:  150px;
     height:  75px;
     margin:  10px;
     border:  3px solid #8AC007;
}

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

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

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

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