CSS 使 div 内联

在 Web 页面中，我们经常需要将元素水平排列，这时候就需要使用到 CSS 中的 display 属性。其中 display: inline 和 display: inline-block 可以将元素内联，使其水平排列。

display: inline

display: inline 使元素内联，和相邻的行内元素在一行上，同时忽略 width 和 height 属性，对于元素来说，视为内容的一部分。

div {
  display: inline;
}

display: inline-block

display: inline-block 使元素内联，但是可以设置 width 和 height 属性。同时，还可以为其设置 margin 和 padding 属性。

div {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 5px;
}

值得注意的是，将元素内联后，可能会出现不希望看到的换行符（line-breaks），此时可以将 HTML 代码的换行符去掉，或者使用 CSS 中的 font-size:0 来消除。

div {
  display: inline-block;
  font-size: 0;
}

以上就是使 div 元素内联的方法，可以根据具体需求选择使用 display: inline 还是 display: inline-block。