Question

这是我网站的图片按钮。 http://puu.sh/cK7Sf/6309c39cdb.jpg当我重新调整浏览器的大小时，它会转到此处http://puu.sh/cK7VU/f17dafcc41.jpg

这是我的代码

HTML

<div class="Nav">
    <div id="buttons">
        <a href="/"><div id="home_button"></div></a>

CSS

#home_button {
background-image: url("home.png");
background-repeat:no-repeat;
background-size: 100%;
width: 150px;
height: 60px;
position: absolute;
top: 196px;
left: 502px;
z-index: 10;
}

Answer 1

原因是left: 502px;

您应该居中div id="buttons"，例如：

.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;
}

这会将#buttons置于.Nav内，#home_button位于左侧

Answer 2

要拥有一个动态网站，您需要拥有流动元素，而不是绝对元素。 http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_absolute 在此链接中，您将看到标题已固定到该位置，因为它位于绝对位置。

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

html - 替换所有＆＃39; a＆＃39;在您的按钮div中使用li（因为它是一个列表）

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

CSS

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

此外：为了使您的代码更高效，更清晰易读，请访问此链接并查看底部部分＆＃39;背景简写＆＃39; http://www.w3schools.com/css/css_background.asp - 速记编码在打字和阅读方面都更快。

例如

background-image: x
background-repeat: x

慢于 background：url（＆＃34; home.png＆＃34;）no-repeat;

在重新调整Web浏览器大小时，如何使图像/按钮保持不变

2 个答案: