html - 带有图像的 Bootstrap 下拉菜单打破了对齐方式

Question

您好，我正在使用这个 Bootstrap 模板 https://bootstrapmade.com/demo/themes/BizPage/ ，问题是我需要下拉菜单中的图像，但它破坏了菜单对齐，有人可以帮忙吗？

完整代码太大，无法添加到这里，所以我上传到这个 FIDDLE https://jsfiddle.net/Lgdohawm/请在 js fiddle 编辑器布局上选择 Columns Bottom results因为它将显示全宽结果页面

部分菜单 - 仅 html

    <header id="header" style="background-color:black">
                 <nav id="nav-menu-container">
                    <ul class="nav-menu">
                      <li class="menu-active"><a href="#intro">Home</a></li>
                      <li><a href="#about">About Us</a></li>
                      <li><a href="#services">Services</a></li>
                      <li><a href="#portfolio">Portfolio</a></li>
        			  <!-- menu with image -->
                      <li class="menu-has-children"><a href="" class="sf-with-ul"><img class="rounded-circle" width="45" src="https://picsum.photos/50/50">&nbsp;@user</a>
                        <ul>
                          <li><a href="#">Drop Down 1</a></li>
                          <li><a href="#">Drop Down 3</a></li>
                          <li><a href="#">Drop Down 4</a></li>
                          <li><a href="#">Drop Down 5</a></li>
                        </ul>
                      </li>
        			   <!-- menu with image -->
                      <li><a href="#team">Team</a></li>
        			  <li><a href="#contact">Contact</a></li>
                    </ul>
                  </nav>
                </div>
              </header>

菜单代码在html注释标签之间<!-- menu with image -->

Answer 1

有没有你使用的原因

float: left

菜单项？

你可以简单地使用

.nav-menu > li {
    display: inline-block;
}

相反。

JSFiddle