横向布局时一般有两种方式：
1）float方式：一般建议用于文字环绕或者其它特定的场合，使用此方式需要解决很多副作用，比较麻烦；
2）inline-block方式：布局建议还是使用inline-block，常用css库purecss等均采用此方式。
以等分4栏为例：
默认的inline-block元素间会有空格或者换行元素的间隙，使用font-size: 0px解决这个间隔问题，在子inline-block元素内部使用font-size: medium恢复字体大小；
.grid {
font-size: 0px;
}
.col {
display: inline-block;
font-size: medium;
width: 25%;
}
<div class="grid">
<a class="col">
Colume 1
</a>
<a class="col">
Colume 2
</a>
<a class="col">
Colume 3
</a>
<a class="col">
Colume 4
</a>
</div>
在目前主流浏览器Firefox、Chrome、Edge、IE8等浏览器中表现OK，但是在IE8的IE7标准模式还是有间距，会产生第四栏折行问题。这个问题可通过letter-spacing的定义来修复。
.grid {
font-size: 0px;
letter-spacing:-.31em;
}
.col {
display: inline-block;
font-size: medium;
width: 25%;
letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto; zoom:1
}
更多资料
https://www.jianshu.com/p/9fb9697832a0