php - 调整大小时保持原位，先将html转为php（图片）

Question

所以我一直在为一个朋友在这个网站上工作，一切都很好，除了一些按钮和图像在调整窗口大小时四处移动。我该如何应对这个问题？

全窗口 http://i.stack.imgur.com/JuuEa.png 调整 大小http://i.stack.imgur.com/UaqCI.png

<div id="topnav">
    <ul id="topnav li">
        <li id="charactersearch"><a href=""></a>
        </li>
        <li id="highscores"><a href=""></a>
        </li>
        <li id="forum"><a href="http://necronia.freeforums.org" target="_blank"></a>
        </li>
        <li id="facebook"><a href="http://facebook.com/Necronia" target="_blank"></a>
        </li>
        <li id="youtube"><a href="http://www.youtube.com/user/NecroniaNW/videos?view=0&flow=grid" target="_blank"></a>
        </li>
        <li id="guilds"><a href=""></a>
        </li>
        <li id="deaths"><a href=""></a>
        </li>
    </ul>
</div>

Answer 1

您已将所有图标的位置设置为绝对位置。

left: 610px;
left: 690px;
left: 805px;

等等。当您调整窗口大小时，它们会与左侧保持 X 像素。

尝试将您的图标放在列表中

<div id="navigation">
    <ul>
        <li>Home</li>
        <li>News</li>
        <li>Contact us</li>
    </ul>
</div>

使用这样的 CSS

#navigation {
    position: relative;
    background-color:yellow;
}
#navigation ul li {
    margin-left:10%;
    display:inline;
}

编辑：您是否通过 css 设置图像？您的链接似乎没有任何内容。您可以在链接中添加图像吗？

<li id="forum"><a href="http://necronia.freeforums.org" target="_blank"></a></li>
<li id="forum"><a href="http://necronia.freeforums.org" target="_blank"><image scr=""/></a></li>