响应式菜单切换按钮对齐

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式菜单切换按钮对齐相关的知识,希望对你有一定的参考价值。

这是我的菜单切换部分:

的jsfiddle

jsfiddle linkexternal html

菜单看起来像这样

题:

切换按钮(菜单图标)在<div class="navigation"></div>容器中对齐的更改是什么?只有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;
}
答案

我没有正确地回答你的问题。但是你希望它向左或向右浮动。根据您提供的图像,它将像:

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

给你一些宽度,你喜欢。

另一答案

从你的问题我有什么理解..更新jsfiddle检查出http://jsfiddle.net / xTgmN / 2 /

另一答案

首先,您必须将#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/

以上是关于响应式菜单切换按钮对齐的主要内容,如果未能解决你的问题,请参考以下文章

为啥我的切换按钮无法使用 Javascript 打开我的响应式菜单?

切换到响应式移动设备时如何并排对齐四个div

Bootstrap 响应式菜单切换器的问题

Bootstrap 3.0 响应式菜单栏切换问题..当增加菜单栏中的内容时

将导航栏切换按钮向右对齐

用于响应式的 HTML + CSS 菜单按钮