在移动网站的标题中对齐元素

Question

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

注意：该网站无法通过更改浏览器窗口大小来响应，但是如果您在Chrome开发人员工具内更改设备，则该网站会输出移动网站。

出于某种原因，右侧的设置按钮不受标题顶部填充的影响：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代码

.menu-icon {
    display: inline-block;
}

.menu-icon-bar {
    width: 35px;
    height: 5px;
    /* background-color: #4F4F4F; */
    background-color: black;
    margin: 6px 0;
}


/* Center logo and display inline */

h1.logo {
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

这是我的网站： http : //goo.gl/613dqx

Answer 1

您有此CSS规则，如果更改为20px，则可以使用。 另外，按钮具有一些btn类，这些类的位置是绝对的，因此这可能就是为什么该元素不受填充影响的原因。

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