响应式菜单切换按钮对齐答案

【问题标题】：Responsive menu toggle button align响应式菜单切换按钮对齐
【发布时间】：2020-03-23 19:25:31
【问题描述】：

这是我的菜单切换部分：

JS 小提琴

jsfiddle link 或 external html

菜单看起来像这样

问题：

在 <div class="navigation"></div> 容器中 make 切换按钮（菜单图标）到 align 有何变化？ 仅限 CSS

为了更好的想象，这里对齐文本（左、右、居中）

HTML：

<div class="navigation">
    <div id="slidebox">

                <div id="toggle">
                    <a href="#">&#9776;</a>
                    <a class="top" href="#slidebox">&#9776;</a>
                </div>

                <ul id="box" class="menu">
                    <li><a href="#">Homepage</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>

            </div>
</div>

CSS：

/* TOGGLE */

#slidebox {
    position: relative;
    padding: 0;
    margin: 0;
    display: block;
    width: 100%;
}

#toggle {
    height: 50px;
    padding: 0;
    position: relative;
    background: #0292a8;
    display: none;
    text-align: center;
}

@media screen and (max-width: 640px) { 
    #toggle {
        display: block;
    }
}

#toggle a { 
    position: absolute;
    text-decoration: none;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
}

#box {
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
    display: block;
}

@media screen and (max-width: 640px) { 
    #box {
        display: none;
    }
}

#slidebox:target #box {
    min-height: 100%;
    display: block;
    opacity: 1;
}

#slidebox:target .top { 
    pointer-events: none;
    display: none;
}

【问题讨论】：

在这段代码中你没有<div class="navigation"></div>。
整个菜单在那个 div 中，我将它添加到代码中，...我只是将问题缩小到切换部分，整个菜单在 jsfiddle 示例中

标签： css menu responsive-design

【解决方案1】：

我没有正确理解您的问题。但是您希望它向左或向右浮动。根据您提供的图像，它将是：

#toggle {
margin-left: auto;
margin-right: 0;
width: 50%;
}

给一些你喜欢的宽度。

【讨论】：

给它（#toggle）一个合适的宽度，然后根据你的意愿使用向左或向右浮动。无需更改其他 CSS 值。
去掉浮动，改为 giv margin-left/ margin-right :50%;
不给50%，最好的办法是给margin-left: auto;边距右：0;。将编辑我的答案。
你能告诉我吗？展开菜单后有一些填充。页面右侧的填充。展开菜单时，会出现向右滑动。
是的。移除宽度：100%；你给了.menu li a。然后滚动条就会消失。

【解决方案2】：

从你的问题我所理解的.. 更新了 jsfiddle 查看http://jsfiddle.net/xTgmN/2/

【讨论】：

【解决方案3】：

首先，您必须将#toggle css 设置为display:inline-block;

@media screen and (max-width: 640px) { 
    #toggle {
        display: inline-block;
    }
}

在你可以做任何事情之后。设置宽度和浮动。

#toggle {
    width:50px;
    float:right;
}

查看http://jsfiddle.net/xTgmN/3/

【讨论】：