HTML元素横向排列的⽅法以及该⽅法存在问题的解决⽅案在CSS中，div、p、等元素是块级元素，默认占据⼀整⾏；两个同⼀级别的兄弟块级元素，会⾃动换⾏显⽰。如果需要两个兄弟块级元素横向排列显⽰，需要设置CSS属性。
⼀：使⽤浮动
1、使⽤浮动float，⽅法如下：
CSS代码：
1.f {
2    width: 100px;
3    border: 1px solid #F00;
4    float: left;
5}
HTML代码：
1<div class="wrapper">
2    <div class="f">第⼀个块级元素</div>
3    <div class="f">第⼆个块级元素</div>
4</div>
使⽤浮动效果，就能让两个块级元素横向排列。
2、使⽤浮动存在的问题
由于float浮动元素不占据正常⽂档流空间，所以⽂档普通流中会忽略浮动块的存在。这就导致，如果⼀个⽗元素只包含了浮动元素，并且这个⽗元素没有设置⾼度、宽度时，就会出现⼀种“塌陷”现象。
3、解决⽅法
解决浮动问题有以下⽅法：
1）、使⽤clear: both清除浮动
在使⽤float浮动元素的⽗元素结束标签前加清除浮动效果。
CSS代码：
1.f {
2    width: 100px;
3    border: 1px solid #F00;
4    float: left;
5}
6.clear_fix {
7    height: 0;
8    clear: both;
9    line-height: 0;
10    font-size: 0;
11}
HTML代码：
4    <div class="clear_fix"></div>
5</div>
在结束标签之后加.clear_fix也能达到清除浮动效果。
2）、使⽤::after伪元素清除浮动
该⽅法原理也是使⽤clear: both清除浮动，只是不再增加.clear_fix空标签；⽽是⽤::after来在元素内部插⼊元素块，从⽽达到清除浮动效果。
CSS代码：
1.f {
2    width: 100px;
3    border: 1px solid #F00;
4    float: left;
5}
6
7.wrapper::after {
8    content: "";
9    width: 100%;
10    height: 0px;
11    display: block;
12    clear: both;
13}
HTML代码：
1<div class="wrapper">
2    <div class="f">第⼀个块级元素</div>
3    <div class="f">第⼆个块级元素</div>
4</div>
3）、在使⽤float元素的⽗元素添加overflow:hidden
使⽤该样式，可以让⽗元素检测到浮动元素的⾼度，从⽽撑起⽗元素，⽗元素有了⾃⼰的⾼度，从⽽达到清除浮动效果。
CSS代码：
1.wrapper {
2    overflow: hidden;
3    zoom: 1;
4}
5
6.f {
7    width: 100px;
8    border: 1px solid #F00;
9    float: left;
10}
HTML代码：
4</div>
⽅法⼆：内联块元素
1、使⽤内联块元素
设置了inline-block属性的元素既拥有了块元素可以设置width、height等的特性，⼜保持了元素不换⾏的特性。
CSS代码：
1ul li {
2    padding: 0px 10px;
3    border: 1px solid #F00;
4    display: inline-block;
5}
HTML代码：
1<ul>
2    <li>第⼀个inline-block元素</li>
3    <li>第⼆个inline-block元素</li>
4</ul>
这样就能实现横向排列。
2、inline-block元素存在的问题
在字体⼤⼩font-size不为0时，元素与元素之间存在间隙。这个问题产⽣的原因是换⾏引起的，因为我们写标签时通常会在标签结束符后打个回车，⽽回车会产⽣回车符，回车符相当于空⽩符，通常情况下，多个连续的空⽩符会合并成⼀个空⽩符，⽽产⽣“空⽩间隙”的原因就是这个空⽩符。
3、解决⽅法
1）、设置⽗元素>font-size为0，再根据实际需求设置本⾝元素font-size。
CSS代码：
1ul {
2    font-size: 0px;
3}
4
5ul li {
6    padding: 0px 10px;
7    font-size: 12px;
8    border: 1px solid #F00;
9    display: inline-block;
10}
2）、元素与元素不换⾏
HTML代码：
1<ul>
2    <li>第⼀个inline-block元素</li><li>第⼆个inline-block元素</li>
3</ul>
4
5<!--或者：-->
6
7<ul>
8    <li>第⼀个inline-block元素</li><!--
9    --><li>第⼆个inline-block元素</li>
10</ul>
11
12<!--或者：-->
13
14<ul>
15    <li>第⼀个inline-block元素
16    </li><li>第⼆个inline-block元素</li>
17</ul>
3）、使⽤margin负值
CSS代码：
1ul li {
2    margin-right: -6px;
3    padding: 0px 10px;
4    border: 1px solid #F00;
5    display: inline-block;
6}
margin的负值与上下⽂的字体、⽂字⼤⼩、浏览器有关。
4）、使⽤letter-spacing或者word-spacing
⼀个是字符间距(letter-spacing)⼀个是单词间距(word-spacing) CSS代码：
1ul {
2    letter-spacing: -6px;
3}
4
5ul li {
6    padding: 0px 10px;
7    border: 1px solid #F00;
8    display: inline-block;
9    letter-spacing: 0px;
10}
11
12/*或者：*/
13
14ul {
15    word-spacing: -6px;
16}
17
18ul li {
19    padding: 0px 10px;
20    border: 1px solid #F00;
21    display: inline-block;
22    word-spacing: 0px;
23}
⽅法三：伸缩布局
1、使⽤flex布局
CSS代码：
1.wrapper {
2    display: -webkit-flex;
3    display: -moz-flex;
4    display: flex;
5
6    -webkit-flex-flow: row nowrap;
7    -moz-flex-flow: row nowrap;
8    flex-flow: row nowrap;
9    -webkit-align-items: stretch;
10    -moz-align-items: stretch;
11    align-items: stretch;
12    -webkit-justify-content: flex-start;
13    -moz-justify-content: flex-start;
14    justify-content: flex-start;
15}
16
17.wrapper > * {
18    width: 200px;
19    border: 1px solid #F00;
20}
HTML代码：
1<div class="wrapper">html的flex布局
2    <div>第⼀个flex元素</div>
3    <div>第⼀个flex元素</div>
4</div>
该⽅法⽐较简单，出现的问题也⽐较少，存在的问题就是：兼容性。不同浏览器之间的兼容性，浏览
器不同版本间的兼容性。但是，只要在属性前边添加浏览器内核的私有属性-webkit-、-moz-、-ms-、-o-基本上都能解决问题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。