CSS 布局-行内块

显示：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; /* the default for 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;
}

亲自试一试 »