Jquery 防止引导将图像推送到导航栏中的下一行

我希望

navbar

与

nav

选项在同一行上显示捐赠栏。此外，在调整图像大小时，图像也会如下图所示下降。我尝试过使用响应式

img

标签，但它们不起作用。尝试对列大小使用

divs

，但仍然不起作用

另外，还有一个额外的问题：我如何将

nav

项目与按钮对齐（如果您查看面包和捐赠按钮，它们稍微偏离，填充不起作用。）

捐赠

CSS:

/*下拉框*/
/*下拉按钮*/
.dropbtn{
背景色：#F8；
颜色：777777；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn2{
背景色：#F8；
颜色：红色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
显示：内联块；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉内容a:悬停{背景色：#f1f1}
/*悬停时显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
/*显示下拉内容时，更改下拉按钮的背景色*/
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}

将div外的按钮移动到它自己的

：

<!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="news.html">News</a>
                </li>
                <li>
                    <a class="page-scroll" href="aboutus.html">About us</a>
                </li>
                <li>
                    <a class="page-scroll" href="team.html">Our Team</a>
                </li>

                <li>
                    <a class="page-scroll" href="volunteering.html">Volunteer</a>
                </li>

                <li>
                    <a class="page-scroll" href="contactus.html">Contact</a>
                </li>
<li>
  <button onclick="location.href='donation.html'" class="dropbtn2" >Donate</button>
</li>
                <li>

                <div class="dropdown">

                  <div class="dropdown-content">
                    <a class="page-scroll" href="donation.html#section1">SET DONATION</a>
                    <a class="page-scroll" href="donation.html#section2">GIFT A DONATION</a>
                  </div>
                </div> 

                </li>



            </ul>
            <a href="donation.html"><img class="alignright hidden-xs" src="icons/fundraisingbar.png"></a>




        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

捐赠

很抱歉，忘了提到它有一个悬停功能，这样做会禁用该功能。我在上面添加了css对不起，我仍然没有悬停选项你能给我图片的完整url吗？

/* Dropdown BOX */

        /* Dropdown Button */
        .dropbtn {
            background-color: #F8F8F8;
            color: 777777;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .dropbtn2 {
            background-color: #F8F8F8;
            color: red;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }


        /* The container <div> - needed to position the dropdown content */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* Dropdown Content (Hidden by Default) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        /* Links inside the dropdown */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {background-color: #f1f1f1}

        /* Show the dropdown menu on hover */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* Change the background color of the dropdown button when the dropdown content is shown */
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }

<!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="news.html">News</a>
                </li>
                <li>
                    <a class="page-scroll" href="aboutus.html">About us</a>
                </li>
                <li>
                    <a class="page-scroll" href="team.html">Our Team</a>
                </li>

                <li>
                    <a class="page-scroll" href="volunteering.html">Volunteer</a>
                </li>

                <li>
                    <a class="page-scroll" href="contactus.html">Contact</a>
                </li>
<li>
  <button onclick="location.href='donation.html'" class="dropbtn2" >Donate</button>
</li>
                <li>

                <div class="dropdown">

                  <div class="dropdown-content">
                    <a class="page-scroll" href="donation.html#section1">SET DONATION</a>
                    <a class="page-scroll" href="donation.html#section2">GIFT A DONATION</a>
                  </div>
                </div> 

                </li>



            </ul>
            <a href="donation.html"><img class="alignright hidden-xs" src="icons/fundraisingbar.png"></a>




        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>