【干货】：如何让元素水平排列？

块级元素默认是垂直排列的，而行内元素是水平排列的，而在布局时基本上都是用块级元素，如div等常用块级标签，那么如何让块级元素也进行水平排列呢？我有100种方式（准确说是100-94种）让元素水平排列，你知道几种呢？

第一种：display：inline-block

　　首先得先了解块级元素（block elements）和行内元素（inline elements）

　　　　 块级元素 ：块级元素包含width height,padding,border与margin，他们的排列方式是从上到下排列，常见的块级元素有div,p,form,ul等等，更多块级元素的可以去MDN上查阅https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

　　　　 行内元素 ：高度和宽度由内容决定，自身没法设定固定的大小，不存在垂直方向的margin和padding，排列方式是水平排列,行内元素在html所有元素占大多数，比如a,span,label,button,img,input......更多行内元素还是MDN查阅https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

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

　　　　 替换元素 ：通俗的理解就是具有width和height属性的元素。替换元素类似于display:inline-block元素，可以设置高宽与内外边距，主要包括img , input , textarea , select , object,audio和canvas在某些特定情形下为替换元素。更官方的定义https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

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

扯了一大堆，我们知道display：inline-block可以让元素横向排列，但是这种布局可能会存在一点点小问题，举栗子：

 
        div {
            display :inline-block ;    width :200px ;    height :200px ;
         }
        .div1 {
            background :green ;
         }
        .div2 {
            background :red ;
         }
 

左边

      
查看更多关于【干货】：如何让元素水平排列？的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did115313