CSS inline-block 属性用于将元素显示为内联级块容器。内联块元素不会从新行开始,但可以将它们设置为特定的宽度和高度。
以下是内联块inline-block属性的一些特征:
该元素将与其他内联元素显示在同一行。
该元素将具有宽度和高度,但是默认情况下,它没有边距或填充。
该元素可以浮动或定位。
该元素可以清除浮动。
display: inline-block 属性是 display: inline 和 display: block 属性的组合。它不仅允许元素表现得像内联元素,而且还能够像块元素一样占用行上的空间。
display: inline、display: block 和 display: inline-block 之间的区别:
inline | block | inline-block |
---|---|---|
元素显示在同一行。 | 元素显示在新行。 | 元素显示在同一行。 |
它不占据容器的整个宽度。 | 它占据容器的整个宽度。 | 它不占据容器的整个宽度。 |
默认没有边距或填充。 | 默认有边距和填充. | 默认有外边距和内边距。 |
下图展示了内联、块和内联的不同布局行为-block 元素:
CSS 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>A man can succeed at almost anything for which he has unlimited enthusiasm.
<span class="display-inline">Yxjc123</span> ,
无论何事,只要对它有无限的热情你就能取得成功。</div>
<h2>Display Block</h2>
<div>A man can succeed at almost anything for which he has unlimited enthusiasm.
<span class="display-block">Yxjc123</span> ,
无论何事,只要对它有无限的热情你就能取得成功。</div>
<h2>Display Inline Block</h2>
<div>A man can succeed at almost anything for which he has unlimited enthusiasm.
<span class="display-inline-block">Yxjc123</span> ,
无论何事,只要对它有无限的热情你就能取得成功。</div>
</body>
</html>
CSS inline-block: 导航链接
使用 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="#">Yxjc123</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>
CSS inline-block: 按钮组
您可以使用 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>
CSS 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="/css/images/tutimg.png" alt="Image">
<span>Yxjc123</span>
</div>
</body>
</html>
CSS inline-block: 进度条
We可以使用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>