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：

中

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

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

例如：

<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;}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

您可以在此处阅读flex：https://www.w3schools.com/css/css3_flexbox.asp

Answer 2

添加到.nav

     .nav{
         overflow:"hidden";
         }

我也建议使用：

     <div class="nav">
         <img src="logo.png"  style="width: 100%; height: 100%">
     </div>

insted的

      <div class="nav" style="background-image:url('logo.png'); width:
      100px; height: 50px;"></div>

如果你想div为50px并且它有15px填充这么实际上你要设置35px的高度（35px高度+15px填充= 50px）所以：

     .nav{
         height:35px;
         }

Answer 3

将所有子对象声明为内联块并将nav div的行高调整为导航div的高度似乎已经有效。

我设法使用以下配置：



        body
        {
            margin: 0px;
        }
        #navbar 
        {
            /*shape*/
            width: 100%;
            height: 50px;

            /*decoration*/
            background-color: #141414;

            /*display: no configuration needed*/
            /*Lesson learned - Only display methods applied to child objects count*/

        }

.nav 
        {
            /*decoration*/
            background-color: none;
            color: white;
            font-family: "comic sans", times, serif;
            overflow: hidden;
            line-height: 50px;
            text-align: center;

            /*shape*/
            height: 50px;

            /*display*/
            display: inline-block;
            margin: auto;
            margin-left: 2px;
        } 
        #navbar 
        {
            width: 100%;
            height: 50px;
            background-color: #141414;
        }

        #logo 
        {
            /*decoration*/
            background-image: url("https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_dark_1x.png");
            background-size: 100%;

            /*shape*/
            height: 50px;
            width: 200px;

            /*display*/
            display:inline-block;

        }
            <div id="navbar">

            <div id="logo"></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 -->

如何在不影响后续div的位置的情况下添加图像

3 个答案: