响应式菜单切换按钮对齐
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式菜单切换按钮对齐相关的知识,希望对你有一定的参考价值。
这是我的菜单切换部分:
的jsfiddle
菜单看起来像这样
题:
切换按钮(菜单图标)在<div class="navigation"></div>
容器中对齐的更改是什么?只有CSS
为了更好的想象,这里是对齐文本(左,右,中心)
html:
<div class="navigation">
<div id="slidebox">
<div id="toggle">
<a href="#">☰</a>
<a class="top" href="#slidebox">☰</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 打开我的响应式菜单?