html - 带图片的列表

Question

我有一个导航标签，里面是运动队的列表。在每个团队的名称旁边，我都有其 Logo 。该列表位于响应页面内。所有 Logo 都正确放置在大窗口上，但在平板电脑和智能手机等较小的窗口上，每个 Logo 都会下降，就好像它是下面团队的 Logo 一样。这是我为每个标志设置的 css:float:right;padding-right:5px;padding-bottom:10px;我该怎么做才能消除这个问题？

列表代码:

<li>
            <a href="Link to team 1 page">Team1</a>
            <img src="team logo.png link" alt="team1" height="20" width="22" class="itemImg" style="float:right;padding-right:5px;padding-bottom:10px;">
        </li>
        <li>
            <a href="team 2 page link">Team 2</a>
            <img src="team2.png link" alt="team 2" height="20" width="22" class="itemImg" style="float:right;padding-right:5px;padding-bottom:10px;">
        </li>
        <li>
            <a "Team 3 page link">Team 3</a>
            <img src="team3.png link" alt="team 3" height="22" width="24" class="itemImg" style="float:right;padding-right:5px;padding-bottom:10px;">
        </li>
        <li>
            <a"team 4 page link">Team 4</a>
            <img src="team4.png link" alt="team4" height="18" width="20" class="itemImg" style="float:right;padding-right:5px;padding-bottom:10px;">
        </li>

Answer 1

您没有显示足够多的 CSS 来正确回答问题，但我猜这个问题涉及 anchor 的宽度 <a>元素。它必须以某种方式设置，以占据浏览器的足够宽度，迫使图像在较小的屏幕上下拉。要解决此问题，您可以将 anchor 向左浮动或缩小宽度。

如果不出意外，它会表明这是手头的问题，您可以从那里开始。