Html 导航栏上的CSS换行

我是网络技术的新手，我正在尝试建立一个导航栏，基本上是一个学习工具。这很好，直到我想要一个带有一个按钮的图像，如（）

该图像似乎导致文本自动换行。没有图像，只有大量的文本，而字段只是扩展。。。只要那里有图像。。。它包起来了。我在不同的元素上尝试了一大堆不同的显示样式。。。我试着把图像和文本放在同一个跨度内，这对我来说似乎是有意义的。。。但我似乎不知道我没有得到css的哪一部分

编辑：html部分

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

---

谢谢。

这是用正确的解决方案更新的小提琴。

添加了

标记的宽度

---

此外，我还添加了清除浮动元素。

您可以发布包含图像的HTML吗？刚刚添加了它。它尽可能简单，我想：）我也能看到你的css吗？它与w3学校的链接完全相同：）除了img{max height:18pt；}我可以看到它在编辑w3编辑器时工作。首先在

和'li a img{height:16px；}中添加了这一行`