css - 按钮没有反应。当屏幕尺寸改变时它们不会更新

Question

我希望按钮在屏幕尺寸改变时更新。这两个按钮放在 img 上并用链接包裹。任何帮助表示赞赏。模板如下:

    <div class="img">
        <img src="topimage.jpg"
        <a href="#" ><button class="left-button">left</button></a>
        <a href="#" ><button class="right-button">right</button></a>
    </div>

CSS:

.left-button {
    display: block;
    position: absolute;
    left: 8%;
    top: 19%;
    font-size: 115%;
    font-weight: bold;
    padding: 0.8em;
}
.right-button {
    display: block;
    position: absolute;
    left: 37%;
    top: 19%;
    font-size: 115%;
    font-weight: bold;
    padding: 0.8em;
}
.img {
     width: 100%;
     display:inline-block;
     position:relative;
    }

Answer 1

您的按钮没有响应 img。您需要在按钮上设置宽度。喜欢:

.left-button { 
    width:30%;
    //your css
}

Working fiddle