Html 如何在重新调整web浏览器大小时使图像/按钮保持在位

这是我的网站的图片按钮。当我重新调整浏览器的大小时，它会显示在这里

这是我的密码

HTML

留下的原因是：502px

您应该将div id=按钮居中，例如：

.Nav {
display: flex;
}
#buttons {
margin: 0 auto;
}
#home_button {
background-image: url("home.png");
background-repeat:no-repeat;
background-size: 100%;
width: 150px;
height: 60px;
}

---

这将使内部的按钮居中。导航和主页按钮将位于左侧

要有一个动态网站，您需要有流动的元素，而不是绝对的元素。 在该链接中，您将看到标题固定在该位置，因为它是绝对定位的

对于流动元素，如您所需。试试这个

html-将按钮div中的所有“a”替换为li，因为它是一个列表

<ul>
    <li id='HomeButton'><a href='#'></a></li> <!-- Duplicate this line with as many links as you want -->
</ul>

此外： 为了使您的代码更高效、更清晰，请点击此链接并查看底部的“背景速记”——速记编码对于打字和阅读都更快

例如

慢于

---

背景：urlhome.png不重复

不是左，而是中。我只能让它向上移动。

.Nav {
display: flex;
}
#buttons {
margin: 0 auto;
}
#home_button {
background-image: url("home.png");
background-repeat:no-repeat;
background-size: 100%;
width: 150px;
height: 60px;
}

<ul>
    <li id='HomeButton'><a href='#'></a></li> <!-- Duplicate this line with as many links as you want -->
</ul>

#buttons ul {
    float: none;
    clear: both;
}
#buttons li {
    float: left;
}
#HomeButton {
    background: url("home.png") no-repeat;
    backgroound-size: 100%;
    width: 150px;
    height: 60px;
}

background-image: x
background-repeat: x