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

按钮没有响应。屏幕尺寸更改时不会更新它们

1 个答案: