导航栏上的CSS自动换行

Question

我是网络技术的新手，我正在尝试构建一个基本上复制https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black作为学习工具的导航栏。这很好用，直到我想要一个带有其中一个按钮的图像，如（https://imgur.com/lTbVsVD）

中的图像

图像似乎导致文字自动换行。没有图像，但是大量的文字和字段只是扩展......只要有一个图像那里......它就会包裹起来。我在各种元素上尝试了一大堆不同的显示风格......我尝试将图像和文本放在同一个范围内，这似乎对我有意义......但我似乎无法弄清楚是什么css的一部分，我没有。

编辑：html部分

<ul>
    <li>
        <a href="#">
            <img src="img/account_image.svg" /> Bob Smith
        </a>
    </li>
    <li>
        <a href="#">
            Home
        </a>
    </li>

感谢。

Answer 1

这是用适当的解决方案更新的小提琴。 https://jsfiddle.net/t10jqmr7/1/

为<img>代码

添加了宽度

我还添加了明确浮动元素。