Html 在移动站点上对齐标题中的元素

我的目标是让菜单图标和设置图标内联，同时在移动站点上保持标题的填充

---

注意：该网站不会通过更改浏览器窗口大小来响应，但如果您在Chrome developer tools内更改设备，则会输出移动网站

由于某些原因，右侧的“设置”按钮不受标题顶部填充的影响：20px

<div data-role="header" class="header-bar ui-header">
    <div>
        <div id="mobileMenuIcon" class="menu-icon">
            <div class="menu-icon-bar"></div>
            <div class="menu-icon-bar"></div>
            <div class="menu-icon-bar"></div>
        </div>
    <h1 class="logo">
        <a href="#" rel="external" data-ajax="false" > 
            <img class="mobile-logo" alt="Blog Name" src="<?php echo $website_logo[0];?>" /> 
        </a>
    </h1>
    <div class="wrapper-btn-login">
        <a data-ajax="false" href="#" class="ui-btn-s icon ui-btn-right click-menu-mobile" data-role="none" data-icon="y"></a>
    </div>  
</div>

这是我的网站：

---

您有这个css规则，如果更改为20px，它就可以工作。此外，按钮还有一些btn类，它们的位置是绝对的，所以这可能就是元素不受填充影响的原因

.header-bar .ui-btn-s {
    top: 8px !important;
    right: 8px;
}

---

注意：通过更改浏览器窗口大小，该站点不会做出响应，但如果您在Chrome developer tools内更改设备，则会输出移动站点。要解决您的问题，应使用媒体查询javascript。你如何处理它。

.header-bar .ui-btn-s {
    top: 8px !important;
    right: 8px;
}