导航栏上的 CSS 自动换行答案

【问题标题】：CSS Word-wrap on navbar导航栏上的 CSS 自动换行
【发布时间】：2018-05-07 21:00:08
【问题描述】：

我是网络技术的新手，我正在尝试构建一个导航栏，基本上复制 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>

谢谢。

【问题讨论】：

能否请您发布包含图片的 HTML？
刚刚添加。我认为它尽可能简单:)
我也可以看看你的css吗？
和 w3schools 的链接完全一样 :) 除了 img { max-height: 18pt; }
我可以看到它在编辑 w3 编辑器时工作。在<ul> 中添加了这一行，最初是<li><a href="#"><img src="https://i.imgur.com/lTbVsVD.png" /> Bob smith</a></li> 和`li a img { height: 16px; } `

标签： html css layout

【解决方案1】：

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

为<img> 标签添加宽度

我还添加了对浮动元素的清晰固定。

【讨论】：