Question

我有一个带有几个图像的导航栏作为导航按钮，当我在chrome（仅）上缩放到110％时，右图像从导航栏中掉出来。这是一个学校项目。

以下是导航栏和CSS的HTML。

CSS

nav {
    width: 960px;
    height: 54px;
    background-color: #191a19;
    margin: auto;
}

.menu_button {
    border: 2px solid #19242e;
}

.menu_button:hover  {
    background-color:#000;
    opacity:0.5;
}

html

jsfiddle

Answer 1

<style>
nav {
    width: 960px;
    height: 54px;
    background-color: #191a19;
    margin: auto;
    overflow:hidden;
}

.menu_button {
    border: 2px solid #19242e;
}

.menu_button:hover  {
    background-color:#000;
    opacity:0.5;
}

nav a{
    display:block
    width:233;
    float:left;
    height:50;
}

nav img{
    width:233;
    height:50;

}
</style>

    <nav>
        <a href="index.html">
            <img class="menu_button" src="images/home_button.jpg"  alt="home button">
        </a>
        <a href="overview.html">
            <img class="menu_button" src="images/overview_button.jpg"  alt="overview button">
        </a>
        <a href="tools.html">
            <img class="menu_button" src="images/tools_button.jpg"  alt="tools button">
        </a>
        <a href="tutorials.html">
            <img class="menu_button" src="images/tutorials_button.jpg"  alt="tutorials button">
        </a>
    </nav>

试试这个家伙，请投票给我答案，这样我将来可以再次帮助你。感谢

Answer 2

您应该将nav css元素的宽度更改为更高的数字（965px）或更低的.menu_button类＆＃39;边界为1px;

希望它有所帮助。

放大时html图像会移动

2 个答案: