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;
}

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

1 个答案: