CSS 布局 - display: inline-block
display: inline-block 值
与 display: inline 相比,主要区别在于 display: inline-block 允许设置元素的宽度和高度。
此外,使用 display: inline-block 时,顶部和底部边距/填充会受到尊重,但使用 display: inline 时则不会。
与 display: block 相比,主要区别在于 display: inline-block 不会在元素后添加换行符,因此元素可以放在其他元素旁边。
以下示例显示了 display: inline、display: inline-block 和 display: block 的不同行为:
示例
span.a {
display: inline; /* span 的默认值 */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
使用 inline-block 创建导航链接
display: inline-block 的一个常见用途是水平显示列表项,而不是垂直显示。以下示例创建水平导航链接:
示例
<!DOCTYPE html>
<html>
<head>
<style>
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
</style>
</head>
<body>
<h1>Horizontal Navigation Links</h1>
<p>By default, list items are displayed vertically. In this example we use display: inline-block to display them horizontally (side by side).</p>
<p>Note: If you resize the browser window, the links will automatically break when it becomes too crowded.</p>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#clients">Our Clients</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</body>
</html>
总结
本文介绍了的CSS 布局display: inline-block使用,如有问题欢迎私信和评论