CSS 布局 - display: inline-block
CSS display: inline-block
CSS inline-block 是 display 属性的一个值，它允许元素以块级盒子的形式格式化，但像内联盒子一样布局。Inline block 元素从同一行开始，但根据元素的高度和宽度占用多行。
display: inline 与 inline-block 与 block 值的区别
以下示例展示了 inline、inline-block 和 block 的区别：
This CSS tutorial covers everything from basic styling concepts and selectors to advanced techniques, such as flexbox, grid, animations, and CSS variables. This CSS tutorial is designed to help both beginners and experienced designers to make them masters in creating visually appealing, responsive, and modern web designs.
CSS 中 inline-block 显示属性的特点
以下是 inline-block 属性的一些关键特点：
- 'display: inline-block' 属性是 'display: inline' 和 'display: block' 属性的结合。
- 元素将与其他内联元素显示在同一行上。
- 如果一行空间不足，元素会换行到下一行，类似于段落中的单词。
- 元素会使用您设置的 width 和 height 属性，不像 'display: inline;' 那样忽略这些属性。
- 元素可以浮动或定位。
Inline、Block 和 Inline-block 的区别
下表展示了 'display: inline'、'display: block' 和 'display: inline-block' 属性之间的区别：
| inline | block | inline-block |
|---|---|---|
| 元素显示在同一行上。 | 元素显示在新行上。 | 元素显示在同一行上。 |
| 它不会占用容器的全宽。 | 它会占用容器的全宽。 | 它不会占用容器的全宽。 |
| 默认没有 margin 或 padding。 | 默认有 margin 和 padding。 | 默认有 margin 和 padding。 |
CSS inline 和 block 示例
这是一个示例，演示了 display: inline、display: block 和 display: inline-block 属性的不同行为。
示例
在这个示例中，我们使用了内联标签即 span 标签来指定内联元素。然后我们使用了 inline、block 和 inline-block 值来观察它们之间的区别。
<html>
<head>
<style>
span{
background-color: #1f9c3f;
border: 2px solid #000000;
color: #ffffff;
padding: 5px;
height: 30px;
text-align: center;
}
.inline {
display: inline;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
</style>
</head>
<body>
<h2>Display Inline</h2>
<div>
There are many variations of passages of Lorem Ipsum
available, <span class="inline">
</span>, by injected humour, or randomized 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="block">
</span> ,by injected humour, or randomized 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="inline-block">
</span> by injected humour, or randomized words
which don't look even slightly believable.
</div>
</body>
</html>
使用 inline-block 创建导航链接
要创建水平导航菜单或列表，你可以使用 inline-block 属性值，其中每个导航项显示为块级元素，但与其他项保持内联。
示例
在这个示例中，我们使用了 inline-block 属性值来创建一个包含四个链接的水平导航栏，使用了 anchor 标签。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.nav-item {
display: inline-block;
padding: 10px 20px;
margin: 5px;
background-color: rgba(3, 25, 38, 0.9);
color: white;
text-decoration: none;
border-radius: 5px;
}
.nav-item:hover {
background-color: rgba(3, 25, 38, 1);
cursor: pointer;
}
</style>
</head>
<body>
<nav>
<a class="nav-item">Home</a>
<a class="nav-item">About</a>
<a class="nav-item">Services</a>
<a class="nav-item">Contact</a>
</nav>
</body>
</html>