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 的不同行为：

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h1>display 属性</h1>
<h2>display: inline</h2>
<div>武汉，简称“汉”，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市，全国重要的工业基地、科教基地和综合交通枢纽。 欢迎来到 to <span class="a">武汉</span>!</div>
<h2>display: inline-block</h2>
<div>武汉，简称“汉”，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市，全国重要的工业基地、科教基地和综合交通枢纽。 Welcome to <span class="b">武汉</span>!</div>
<h2>display: block</h2>
<div>武汉，简称“汉”，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市，全国重要的工业基地、科教基地和综合交通枢纽。 Welcome to <span class="c">武汉</span>!</div>
</body>
</html>

运行一下

使用 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>水平导航链接</h1>
<p>默认地，列表项是垂直显示的。在本例中，我们使用 display: inline-block 来水平地显示它们（并排）。</p>
<p>注释：如果您调整浏览器的大小，链接会在变得拥挤时自动换行。</p>
<ul class="nav">
  <li><a href="#home">首页</a></li>
  <li><a href="#about">关于我们</a></li>
  <li><a href="#clients">客户案例</a></li>
  <li><a href="#contact">联系我们</a></li>
</ul>
</body>
</html>

运行一下

CSS 布局 - display: inline-block

display: inline-block

使用 inline-block 来创建导航链接

分类导航