Question

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

在宽屏上，about/close文本（也是侧面菜单按钮）将向左移

我尝试修改css和{{1}两个元素上的position: fixed，relative，absolute等responsive-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
                }
            }

Answer 1

我已经知道了，我在这里进行了更改：

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

替换为：

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

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

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

1 个答案: