CSS 布局 - 显示：inline-block

显示：inline-block Value

display: inline与 display: inline-block 相比，主要 不同之处在于允许 设置元素的宽度和高度。
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;}

尝试一下 »