使用相对于包装器 div 的边距百分比,而不是浏览器大小
我需要使用 css 定位三个按钮。例如,我目前正在使用 margin-left: 20% 。但是,当我更改浏览器窗口大小时,按钮会从原始位置移动。
这是我网站的链接: http://www.iamjoetaylor.co.uk
其他元素全部呆在正确的地方,我需要做什么?
谢谢
I need to position three buttons using css. I am currently using margin-left: 20% for example. However when I change the browser window size the buttons move from their original location.
This is the link to my site: http://www.iamjoetaylor.co.uk
The other elements all stay in the right place, what do I need to do?
Thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
“position:absolute”元素的坐标和边距是根据具有绝对或相对位置的最接近的父元素计算的。如果没有这样的元素,那么它们是根据 body 元素计算的。
如果你想相对于#wrapper元素定位按钮,那么你需要将#wrapper的位置设置为relative。
"position: absolute" element's coordinates and margins are computed from the closest parent element that had position absolute or relative. If there is no such element, then they are computed from the body element.
If you want to position buttons relatively to #wrapper element, then you need to set #wrapper's position to relative.
问题是您在包含该元素的 3 个 div 上使用了
position:absolute
。在我看来,您应该使用position:relative
重写规则以实现您想要的样式The problem is that you are using
position:absolute
on the 3 divs that contains the element. In my opinion, you should rewrite the rules for those to achieve the style you want usingposition: relative
将边距设置为相对于父元素大小的百分比。如果无论浏览器窗口大小如何,项目符号列表的边距要求都需要保持一致,只需使用
px
而不是%
Setting your margin's to a percentage is relative to the size of the parent element. If the margin require for the bullet list needs to stay consistant regardless of the size of the browser window, simply use
px
instead of%