css如何实现元素水平排列

这篇文章将为大家详细讲解有关css如何实现元素水平排列，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
第一种：display：inline-block
首先得先了解块级元素（blockelements）和行内元素（inlineelements）
块级元素：块级元素包含widthheight,padding,border与margin，他们的排列方式是从上到下排列，常见的块级元素有div,p,form,ul等等。
行内元素：高度和宽度由内容决定，自身没法设定固定的大小，不存在垂直方向的margin和padding，排列方式是水平排列,行内元素在h免费云主机、域名tml所有元素占大多数，比如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(∩_∩)O）
扯了一大堆，我们知道display：inline-block可以让元素横向排列，但是这种布局可能会存在一点点小问题，举栗子：

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

相关推荐: HTML中a标签的使用方法及跳转方式有哪些

这篇文章主要介绍“HTML中a标签的使用方法及跳转方式有哪些”，在日常操作中，相信很多人在HTML中a标签的使用方法及跳转方式有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”HTML中a标签的使用方法及跳转方式有哪些”的疑惑…