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 的一个常见用途是将列表项水平显示而不是垂直显示。以下示例创建水平导航链接。
示例
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
尝试一下 »
