设置两个div以显示内联，但它们是对角显示的

Question

我在导航栏中有两个div，当他们尝试将它们显示为内联时，它们会像这样显示而不是并排显示：

这是HTML：

<!--Nav starts here-->
    <nav class="navbar">

        <div class="navbar-item-set">
            <div class="navbar-item">
                <a href="index.html" class="navbar-text">
                    <img src="images/sad_robot.png" alt="" width="45" height="45"/>
                    <br>    
                    ID2 Games
                </a> 
            </div>

            <div class="navbar-item">
                <a href="index.html" class="navbar-text">
                    <img src="images/sad_robot.png" alt="" width="45" height="45"/>
                    <br>
                    Fizz + Hummer
                </a>
            </div>
        </div>

    </nav>
<!--Nav ends here-->

各自的CSS：

.navbar{
    height: 80px;
    text-align: center;
    font-size: 1.7rem;
    background-color: black;
}

.navbar-item-set{
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.navbar-item{
    display: inline;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    color: white;
}

造成这种奇怪布局的原因是什么？

Answer 1

更改

.navbar-item{
display: inline;
margin-left: auto;
margin-right: auto;
width: 150px;
color: white;
}

要

.navbar-item{
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 150px;
color: white;

}

Answer 2

删除HTML中的<br/>元素应该可以解决问题。