如何以不同的分辨率将几个元素保持在同一位置

时间:2018-09-08 22:10:02

标签: html css

我有这个菜单标题栏,@ 1280x720看起来像这样:

enter image description here

在宽屏上,about/close文本(也是侧面菜单按钮)将向左移

enter image description here

我尝试修改css和{{1}两个元素上的position: fixedrelativeabsoluteresponsive-menu-pro-header属性},但效果不佳。

我还必须承认,菜单标题栏元素的制作可能不是最佳形式。我已经使用了很少的编码知识来构建它,可能是这些元素相对于菜单按钮responsive-menu-pro-header-bar-button / about(?)的分辨率有所不同。

问题:
是否有可能将所有元素以不同的分辨率(高于1280x720)保持在一起,从而保留按钮close / about和其余标题菜单元素(文本/联系人链接)的初始位置,就像我们在第一张图片中一样?

我有兴趣找到仅适用于64位Chrome版本69.0.3497.81的解决方案,而不适合跨浏览器或较小的移动设备。 网站测试页here

close
button#responsive-menu-pro-button,#responsive-menu-pro-container {
                display: none;
                -webkit-text-size-adjust: 100%
            }

            #responsive-menu-pro-container {
                z-index: 99998
            }

            @media screen and (max-width: 80000px){
            button#responsive-menu-pro-button {
                    width: 70px;
                    height: 80px;
                    position: fixed;
                    top: 3px;
                    left: px;
                    display: inline-block;
                    transition: transform 2.5s, background-color 0.5s
                }
}

            #responsive-menu-pro-header {
                width: 100%;
                padding: 0 5%;
                box-sizing: border-box;
                top: 0;
                right: 0;
                left: 0;
                display: none;
                z-index: 99998
            }

            #responsive-menu-pro-header .responsive-menu-pro-header-box {
                display: inline-block
            }

            #responsive-menu-pro-header .responsive-menu-pro-header-box,#responsive-menu-pro-header .responsive-menu-pro-header-box img {
                vertical-align: middle;
                max-width: 100%
            }

            #responsive-menu-pro-header #responsive-menu-pro-header-bar-logo img {
            }

            #responsive-menu-pro-header button#responsive-menu-pro-button {
                position: relative;
                margin: 0;
                left: auto;
                right: auto;
                bottom: auto
            }

            #responsive-menu-pro-header .responsive-menu-pro-header-box {
                margin-right: 2%
            }

            @media screen and (max-width: 80000px) {
                #responsive-menu-pro-header {
                    position: fixed;
                    background-color: rgba(255, 255, 255, 0);
                    height: 80px;
                    color: rgba(255, 255, 255, 0);
                    display: block;
                    font-size: 14px
                }

                #responsive-menu-pro-header .responsive-menu-pro-header-bar-item {
                    line-height: 80px
                }

                #responsive-menu-pro-header a {
                    color: rgba(255, 255, 255, 0);
                    text-decoration: none
                }
            }

1 个答案:

答案 0 :(得分:0)

我已经知道了,我在这里进行了更改:

#responsive-menu-pro-header {
    padding: 0 5%;
}

替换为:

#responsive-menu-pro-header {
    padding: 0 63px !important;
}

现在,无论什么分辨率,菜单标题栏和触发按钮都保持对齐。感谢您的支持。