html使div内部元素水平排列_实现元素水平排列的六种方法

众所周知，块级元素默认是垂直排列的，行内元素是水平排列的，而在布局时基本上都是用块级元素，如div等常用块级标签，那么如何让块级元素也进行水平排列呢？这篇文章给大家介绍六中方式，实现块级元素的水平排列。

第一种：display：inline-block

首先得先了解块级元素(block elements)和行内元素(inline elements)

块级元素：块级元素包含width height,padding,border与margin，他们的排列方式是从上到下排列，常见的块级元素有div,p,form,ul等等。

行内元素：高度和宽度由内容决定，自身没法设定固定的大小，不存在垂直方向的margin和padding，排列方式是水平排列,行内元素在html所有元素占大多数，比如a,span,label,button,img,input......

这里可能有人会产生疑问，“button和img以及input等标签可以设置宽度和高度也可以设置margin与padding，为什么它确实行内元素呢？”其实html元素主要有两种划分方式，分别是“块级元素与行内元素”，“替换元素与不可替换元素”。上面介绍了第一种划分方式，下面介绍一下第二种划分方式：

替换元素：通俗的理解就是具有width和height属性的元素。替换元素类似于display:inline-block元素，可以设置高宽与内外边距，主要包括img , input , textarea , select , object,audio和canvas在某些特定情形下为替换元素。

不可替换元素：除了替换元素剩下的都是不可替换元素(O(∩_∩)