Question

我有一个导航标签，里面是一个运动队列表。在每个团队的名称旁边，我都有自己的徽标。该列表位于响应式页面中。所有徽标都在大窗户上正确定位，但在平板电脑和智能手机等较小的窗口上，每个徽标都会下降，就好像它是下面团队的徽标一样。这是我对每个标志的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来正确回答问题，但我猜测问题涉及到锚<a>元素的宽度。必须以某种方式设置它占用足够的浏览器宽度，迫使图像在较小的屏幕上下拉。要解决此问题，您可以向左浮动锚点或使宽度更小。

如果不出意外，它会表明问题就在眼前，你可以从那里开始。

<nav>列出图像

1 个答案: