html div水平并列

我们昨天写出了标题栏上的一个按钮，今天想要多写几个按钮出来，但是当我们复制了多个but1的div时，却会发现他们排列成了一直行

    <div class="column">
        <div class="but1">按钮一</div>
        <div class="but1">按钮二</div>
        <div class="but1">按钮三</div>
        <div class="but1">按钮四</div>
    </div>

这时候我们在but1的css中加入以下程序码，让他达成水平排列的效果

display: inline-block;

画面就会变成下图

但是为甚麽每个方块之间都会有一段缝隙呢？是因为使用inline-block时，div之间不能换行，因此html内的程序码必须改成这样

    <div class="column">
        <div class="but1">按钮一</div><div class="but1">按钮二</div><div class="but1">按钮三</div><div class="but1">按钮四</div>
    </div>

图中为宽度不够导致的自动换行，但在写的时候不能主动换行，这时网页的就达成我们想要的效果了

今天先说到这里，明天再来说说如何让鼠标放上按钮时改变成手套的样式，并且改变底色