گاهی پیش می‌آید که قصد قرار دادن دو المان از نوع بلاک در یک ردیف را داشته باشیم که به‌نظر کار مشکلی است؛ ولی ما در این بخش با کمک دستور display به سادگی هر چه تمام تر این کار را انجام خواهیم داد.
در جلسه‌ی چهارم از سری مقالات آموزشی CSS به ارائه‌ی اطلاعاتی درباره‌ی دستور display می‌پردازیم.
دستور inline block چه کاربردی دارد؟
همانطور که می‌دانید المان‌های اچ‌تی‌ال غالبا به صورت بلاک و خطی بوده و هر المان یک سطر کامل را اشغال می‌کند. کلمه بلاک در واقع برای المان‌هایی مثل <p> یا <div> اطلاق می‌شود. این المان‌ها زمانی که نوشته می‌شوند هیچ چیز دیگری را در کنار خود جای نمی‌دهند. اگر خاطرتان باشد چند جلسه پیش ما با استفاده از شناوری float المان‌ها توانستیم که این المان‌ها را در کنار هم قرار دهیم. اما امروز می‌خواهیم یک راه حل دیگر برای کنار هم چیدن المان‌های صفحه به شما بگوییم و آن هم چیزی نیست به جز استفاده از display و مقدار inline-block! با کمک این دستور تمامی المان‌هایی که دارای این ویژگی باشند، در یک خط و در کنار یکدیگر قرار می‌گیرند.
نام: display
این دستور چه کاری انجام می‌دهد؟ نحوه‌ی نمایش المان‌های شما رامشخص می‌کند. ما در این دوره فقط با مقدار inline-block کار داریم که المان‌های اچ تی ام ال در یک خط و در کنار هم می‌آورد.
چه چیزهایی را در مقابلش بنویسیم؟ در این آموزش فقط با مقادیر خطی کردن یعنی inline-block کار داریم.
نمونه‌ی نوشتن این دستور: display: inline-block
HTML
<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>
CSS
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #8AC007;
}
همانطور که در مثال بالا مشاهده می‌کنید، بعد از استفاده از دستور inline-block دیویژن‌های ما به صورت شناور در کنار هم و در یک سطر قرار گرفتند.
تمرین: برای اینکه نشان دهید چقدر با جلسه امروز توانسته‌اید ارتباط برقرار کنید، یک لیست بدون نظم unorderd list ایجاد کنید و کاری کنید که آیتم‌های لیست به جای اینکه زیر هم قرار بگیرند، در کنار هم قرار بگیرند.
راهنمایی: اگر نمی‌دانید قضیه از چه قرار است راهنمایی کوچکی می‌کنیم. المان لیست یک المان بلاک است و برای تبدیل یک المان بلاک به المانی که در یک خط قرار بگیرد، از دستور بخصوصی استفاده می‌کردیم. باقی این موضوع را دیگر خودتان می‌دانید!
قوانین و مقررات ارسال دیدگاه در بخش دیدگاه‌های زومیت
لطفا در نظر داشته باشید که زومیت در صورت مشاهده‌ی دیدگاه خلاف قوانین سایت، این حق را دارد که دیدگاه کاربر را بدون اطلاع قبلی پاک کند. همچنین در صورت تکرار در نقض قوانین سایت، به صلاح‌دید زومیت، حساب کاربری کاربر خاطی مسدود خواهد شد.
در صورت مشاهده‌ی تاپیک ها و پست های توهین آمیز یا خلاف قوانین از بحث کردن و پاسخ دادن به آن‌ها جدا خودداری کرده و صرفا موضوع را از طریق آیکون گزارش به اطلاع ما برسانید.