ویژگی inline-block در CSS برای نمایش یک عنصر به عنوان یک ظرف بلوک در سطح اینلاین استفاده می‌شود. عناصر inline-block به صورت خاصیت نمایشی بلوک در سطح اینلاین نشان داده می‌شوند. این عناصر در یک خط جدید شروع نمی‌شوند، اما می‌توان به آن‌ها عرض و ارتفاع خاص تعیین کرد.
اینجا برخی از ویژگی‌های خاصیت inline-block را بیان کرده‌ایم:
- عنصر در همان خط با سایر عناصر در سطح اینلاین نمایش داده می‌شود.
- عنصر عرض و ارتفاعی دارد، اما به طور پیش‌فرض مارجین یا پدینگ ندارد.
- عنصر می‌تواند شناور یا قرار گیری داشته باشد.
- عنصر می‌تواند از شناوری پاک شود.
خاصیت display: inline-block ترکیبی از خاصیت‌های display: inline و display: block است. این به عنصر این امکان را می‌دهد که علاوه بر رفتار مشابه یک عنصر اینلاین، بتواند مانند یک عنصر بلوک در خط فضا را اشغال کند.
تفاوت بین خاصیت display: inline، display: block و display: inline-block به شرح زیر است:
| خاصیت | شروع در خط مشابه | عرض در اندازه کامل از ظرف | مارجین یا پدینگ پیش‌فرض |
|---|---|---|---|
display: inline |
خط جدید | نمی‌گیرد | ندارد |
display: block |
خط جدید | می‌گیرد | دارد |
display: inline-block |
همان خط | نمی‌گیرد | دارد |
در نمودار زیر رفتارهای مختلف عناصر inline، block و inline-block را می‌توانید مشاهده کنید.
مثال با حالت های مختلف
این مثال نشان می‌دهد که چگونه خاصیت‌های display: inline، display: block و display: inline-block در عمل عمل می‌کنند و چگونه رفتار آن‌ها متفاوت است.
<html>
<head>
<style>
.display-inline {
display: inline;
background-color: #1f9c3f;
border: 2px solid #000000;
color: #ffffff;
padding: 5px;
text-align: center;
}
.display-block {
display: block;
background-color: #1f9c3f;
border: 2px solid #000000;
color: #ffffff;
padding: 5px;
height: 30px;
text-align: center;
}
.display-inline-block {
display: inline-block;
background-color: #1f9c3f;
border: 2px solid #000000;
color: #ffffff;
padding: 5px;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<h2>Display Inline</h2>
<div>There are many variations of passages of Lorem Ipsum available,
<span class="display-inline">Tutorialspoint</span> ,
by injected humour, or randomised words which don't
look even slightly believable.</div>
<h2>Display Block</h2>
<div>There are many variations of passages of Lorem Ipsum available,
<span class="display-block">Tutorialspoint</span> ,
by injected humour, or randomised words which don't
look even slightly believable.</div>
<h2>Display Inline Block</h2>
<div>There are many variations of passages of Lorem Ipsum available,
<span class="display-inline-block">Tutorialspoint</span> ,
by injected humour, or randomised words which don't
look even slightly believable.</div>
</body>
</html>در این مثال، سه کلاس CSS با نام‌های .display-inline، .display-block و .display-inline-block تعریف شده‌اند. هر کدام از این کلاس‌ها با استفاده از یکی از مقادیر display، یعنی inline، block و inline-block، خاصیت نمایش عناصر را تنظیم می‌کنند.
در اینجا چند نکته مهم در مورد رفتار هر یک از این کلاس‌ها و خاصیت‌های مرتبط با آن‌ها وجود دارد:
-
.display-inline: این کلاس یک عنصر را به صورت یک عنصر در سطح اینلاین نمایش می‌دهد. این عنصر در یک خط با عناصر دیگر قرار می‌گیرد و اندازه عنصر بر اساس محتوای داخلی آن تنظیم می‌شود. (نمونه: “Tutorialspoint” در هر خط) -
.display-block: این کلاس یک عنصر را به صورت یک عنصر بلوک نمایش می‌دهد. عنصر در یک خط جدید شروع می‌شود و اندازه عنصر از طریق خصوصیت‌هایwidthوheightقابل تنظیم است. (نمونه: “Tutorialspoint” در یک خط جدید با ارتفاع ثابت) -
.display-inline-block: این کلاس یک عنصر را به صورت یک عنصر در سطح اینلاین-بلوک نمایش می‌دهد. عنصر در همان خط با عناصر دیگر قرار می‌گیرد، اما می‌توان به آن ارتفاع و عرض دلخواه داد. (نمونه: “Tutorialspoint” در همان خط با ارتفاع ثابت)
این مثال نشان می‌دهد که با استفاده از این سه خاصیت، می‌توانیم رفتار نمایش عناصر را به صورت دلخواه تنظیم کنیم.
لینک های Navigation
این مثال نشان می‌دهد که چگونه از خاصیت inline-block برای ایجاد منوهای گسترده افقی یا لیست‌ها استفاده می‌شود، جایی که هر مورد ناوبری به عنوان یک عنصر بلوک نمایش داده می‌شود، اما همچنان به صورت اینلاین با سایر موارد مانده است.
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 15px;
background-color: #1f9c3f;
}
li {
display: inline-block;
}
a {
padding: 10px;
color: rgb(247, 247, 247);
}
</style>
</head>
<body>
<ul>
<li><a href="#">Tutorialspoint</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">About us</a></li>
</ul>
</body>
</html>ul) به عنوان منوی ناوبری افقی تعریف شده است. موارد ناوبری (li) با استفاده از خاصیت display: inline-block به عنوان عناصر بلوک نمایش داده شده‌اند، که به این شکل به همراه سایر موارد ناوبری در یک خط قرار می‌گیرند.
سپس برای استایل‌دهی به لینک‌ها (a) در داخل موارد ناوبری، از پراپرتی‌های CSS مختلفی مانند padding و color استفاده شده است تا ظاهری مطلوب برای ناوبری ایجاد شود. ایجاد Button Groups
این قسمت نشان می‌دهد که چگونه می‌توان با استفاده از ویژگی inline-block گروه‌هایی از دکمه‌ها را افقی ایجاد کرد. در اینجا، دکمه‌ها به صورت افقی در یک خط نمایش داده می‌شوند و اندازه و عرض خاصی دارند.
<html>
<head>
<style>
.button-group {
display: inline-block;
background-color: #ef4343;
}
button {
padding: 10px;
margin: 10px;
background-color: #1f9c3f;
border: none;
color: #ffffff;
width: 80px;
height: 40px;
}
</style>
</head>
<body>
<div class="button-group">
<button>Submit</button>
<button>Cancel</button>
<button>Reset</button>
</div>
</body>
</html>
button-group است که دارای ویژگی display: inline-block است. این باعث می‌شود دکمه‌ها به صورت افقی در یک خط قرار بگیرند. هر دکمه دارای ویژگی‌های خاصیت مانند padding، margin، background-color، border، color، width و height است که باعث تعیین اندازه و استایل دکمه‌ها می‌شود. تصاویر و متن (Images And Text)
این قسمت نشان می‌دهد که چگونه می‌توان با استفاده از ویژگی inline-block تصویر و متن را در یک خط نمایش داد. در اینجا، تصویر و یک متن داخل یک دایو قرار داده شده‌اند و با استفاده از inline-block، آن‌ها روی یک خط قرار گرفته‌اند تا از جهت افقی درون یک بلوک قرار بگیرند.
<html>
<head>
<style>
div {
display: inline-block;
}
img {
width: 100px;
height: 100px;
}
span {
padding: 10px;
}
</style>
</head>
<body>
<div>
<img src="images/tutimg.png" alt="Image">
<span>Underdevelops</span>
</div>
</body>
</html>
در این مثال، یک دایو با استایل display: inline-block داریم که شامل یک تصویر (img) و یک متن (span) است. تصویر از تصویری با اندازه ۱۰۰x۱۰۰ پیکسل استفاده شده‌است و متن دارای فاصله (padding) ۱۰ پیکسل است. این دو عنصر با استفاده از inline-block روی یک خط درون دایو قرار گرفته‌اند و از جهت افقی درون آن قرار می‌گیرند.
نوار پیشرفت (Progress Bars)
این قسمت نشان می‌دهد که چگونه می‌توان با استفاده از ویژگی inline-block نوارهای پیشرفت را ایجاد کرد. این ویژگی باعث می‌شود عناصر درون یک خط نمایش داده شوند و به عنوان یک عنصر درون خط در میان عناصر دیگر نمایش داده شوند.
<html>
<head>
<style>
.progress-bar {
display: inline-block;
width: 100%;
height: 25px;
background-color: blue;
border-radius: 15px;
overflow: hidden;
}
.progress-bar-fill {
width: 70%;
background-color: #1f9c3f;
height: 100%;
}
</style>
</head>
<body>
<div class="progress-bar">
<div class="progress-bar-fill"></div>
</div>
</body>
</html>
در این مثال، یک دایو با کلاس progress-bar و استایل display: inline-block داریم که یک نوار پیشرفت را نشان می‌دهد. این دایو دارای عرض ۱۰۰٪ و ارتفاع ۲۵ پیکسل است و رنگ پیش‌فرض آبی دارد. همچنین شعاع گردی ۱۵ پیکسل و اضافی‌کردن scroll-bar به این دایو غیرفعال شده است.
در داخل دایو progress-bar، یک دایو دیگر با کلاس progress-bar-fill قرار دارد که عرض آن به ۷۰٪ تنظیم شده و رنگ آن به سبز تغییر داده شده است. این دایو به عنوان بخش پر شده از نوار پیشرفت نمایش داده می‌شود.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام