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

【问题标题】：buttons are not responsive. They are not updated when screen size changes按钮没有响应。屏幕尺寸更改时它们不会更新
【发布时间】：2014-10-24 23:25:28
【问题描述】：

我希望当碎石尺寸发生变化时按钮会更新。这两个按钮放在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;
    }

【问题讨论】：

//你的html无效 - 你需要关闭你的img标签。
您应该展示您想要实现的目标和没有实现的目标。
使用一些 javascript，您可以获得窗口尺寸并更新按钮尺寸（您可以在加载时调用该函数，因此每次打开窗口时，按钮尺寸都会根据您的窗口大小进行更新）@ 987654325@
@Doodlebunch，嗨，我希望根据 img 将两个按钮放置在正确的相对位置。但是当屏幕尺寸变小时，位置就乱了。
@Axess 这是一个 jsfiddle：jsfiddle.net/tc1a6y5g 看起来不错，你能指出什么问题吗？

标签： css responsive-design css-position

【解决方案1】：

您的按钮无法响应img。您需要在按钮上设置宽度。喜欢：

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

Working fiddle

【讨论】：

嗨 Frederik，既然我指定了字体大小，我还需要宽度吗？我尝试添加宽度，但没有成功。
嘿，字体大小不响应窗口宽度。字体大小上的 % 与父级的字体大小有关。示例：您的父级的字体大小为 10 像素，因此按钮上的字体大小为 130%，您的按钮的字体大小为 13 像素。
添加了一个工作小提琴。你能告诉我到底是什么不起作用吗？
您好 Frederik，感谢您的帮助！根据img，我希望两个按钮的大小和位置都相对稳定。现在他们四处走动。
你能给我分享一个小提琴吗？