第六十章 横排

讲了半天盒子，我们的盒子都只是纵向排列。因为我们讲：默认盒元素是要自己独占一行的。

但是，大部分情况下，我们需要盒元素可以横排，毕竟极其单纯的纵向布局实在无法满足我们对于网页的需求。至少，我们谁也不想每次看网页都要滚动无数次滚轮，鼠标坏了也是要花钱买的啊。

那就横排吧，你第一个想到的方法是什么？如果它们是行内元素就好了。但是行内元素不能有宽高内补外补，这就会很不方便。那如果在行内元素里放一个块级元素……对不起，标准不允许。

尴尬，尴尬如同睡眼惺忪的老鼠，端着咖啡直楞楞的站在那里。

先说一个属性吧，display 属性可以设置这个元素是行内元素 inline 或是块级元素 block，也就是说，这个确实是可以进行转变的，虽然……我们的问题还是没有得到解决。

然后它还有第三个属性值可以使用^[1]，inline-block，这个看起来有意思，你说这到底算啥？在行内的块元素吧。其实这涉及一个对外表现（对于文档流），和对内表现（自身样式），你这么区分一下，就理解了，这算是两种模式的一个结合。

那动手写一下吧：

<div class="box-inline-box">第一</div><div class="box-inline-box">第二</div><div class="box-inline-box">第三</div><div class="box-inline-box">第四</div>

.box-inline-box {display: inline-block;border: 3px solid orange;padding: 10px;}

第一 第二 第三 第四

成功了吧，简单吧，横排了吧，内补也起作用了吧，多美好……

我设置外补了么？没有外补，元素间的空隙是哪里来的？这是一个重要的问题，划重点，必考哦~

对外表现是行内元素对不对？行内元素会把里面的空白合并显示为一个空格对不对？块元素间的空白才被无视。所以这个空白（间隔），就是代码中换行产生的空白，不信你把这些元素写在一行，中间不留空白试试看，马上就好。

但是，我们这么简单的元素写在一行都让人觉得很乱，如果复杂一点还不要人命么。所以我不喜欢这种方法。

网上也讲了许多解决方案。能解决，但是都有一定的弊病或者别扭，反正，我不喜欢。不过还是要知道滴~因为有用啊！否则你以为本站链接怎么做的那么漂亮的呢？