html - 内联 block 不会以某种方式显示在一条直线上

<分区>

我正在创建一个通过邮件发送的 html 时事通讯，这就是我的进展:

CSS

.kasten {
    color: #000;
    display: inline-block;
    border-size: 1px;
    border-style: solid;
    border-radius: 10px;
    border-color: #493c2a;
    margin: 7px;
    padding: 0px;
    box-shadow: 0px 0px 10px #222;
    width: 300px;
    height: 300px;
    text-decoration: none;
}

HTML

<div class="kurse">
    <a class="kasten" href="#">
        <!-- content -->    
    </a>
    <a class="kasten" href="#">
        <!-- content -->    
    </a>
    <a class="kasten" href="#">
        <!-- content -->    
    </a>
</div>

问题是，这些 block 不会显示在一行中，而是带有某种“颠簸”。

有人知道如何解决这个问题吗？

最佳答案

你需要将它对齐到顶部