html - 如何在不影响以下 div 位置的情况下添加图像

Question

我有一类行为预测的 div。代码如下:

.nav 
{
background-color: none;
height: 50px;
width: 100px;
text-align: center;
color: white;
font-family: "comic sans", times, serif;
display: inline-block;
margin: auto;
margin-left: 2px;
padding-top: 15px;
}

这是在包装器 id 导航栏中:

#navbar 
{
width: 100%;
height: 50px;
background-color: #141414;
}

但是每当我尝试向其中一个 div 添加图片或大字时，其余包含文本的 div 都会移动，以便只有包含文本的部分位于包装内，其余部分则垂下在 wrapper 外面。

例如:

<div id="navbar">

        <div class="nav" style="background-image:url('xyz.jpg'); width: 
100px; height: 50px;"></div>
        <div class="nav"><a href="#" style="text-decoration: 
none;">Home</a></div>
        <div class="nav"><a href="#" style="text-decoration: 
none;">Genres</a></div>
        <div class="nav"><a href="#" style="text-decoration: 
none;">Favorites</a></div>


    </div> <!-- End of navbar -->

我尝试在线搜索，但未能找到解决此问题的方法。过去有人遇到过这个问题吗？

Answer 1

尝试添加:{ display: flex;}

.nav 
{
background-color: none;
height: 50px;
width: 100px;
text-align: center;
color: white;
font-family: "comic sans", times, serif;
margin: auto;
margin-left: 2px;
padding-top: 15px;
} 
#navbar 
{
display:flex;
width: 100%;
height: 50px;
background-color: #141414;
}

<div id="navbar">

        <div class="nav" style="background-image:url('paper.gif'); width: 
100px; height: 50px;"></div>
        <div class="nav"><a href="#" style="text-decoration: 
none;">Home</a></div>
        <div class="nav"><a href="#" style="text-decoration: 
none;">Genres</a></div>
        <div class="nav"><a href="#" style="text-decoration: 
none;">Favorites</a></div>


    </div>

您可以在此处阅读有关 flex 的信息:https://www.w3schools.com/css/css3_flexbox.asp