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