html - 将两个 div 设置为内联显示，但它们是对 Angular 显示的

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;