响应式导航调整
响应式导航调整
提问于 2015-04-06 20:08:10
我正在做一个响应菜单，默认情况下，该菜单将与站点标题内联显示。然而，在移动平台上，菜单需要显示在站点标题下面的列表中，并通过点击+或-进行切换。除了两个小问题之外，我已经完成了所有这一切。
- 我似乎无法使菜单相对于文档流显示，从而使其与页面上的文本重叠。
- 我需要菜单是整个页面的宽度。
我不确定我是否只需要把这个菜单放到它自己的导航之外的div中，或者我只是忘记了一些css规则。目前，它被设置为：
<nav>
<div id="nav-div">
<div id="title"></div>
<div id="menu-toggle"></div>
<div id="nav-links">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</div>
</div>
</nav>CSS：
#nav-links {
position:absolute;
width:100%;
ul {
}
li {
display:block;
float: none;
border-bottom: 1px solid black;
&:last-child {
border-bottom: none;
}
a {
}
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2015-04-06 20:21:56
您需要在top和left属性上设置#nav-links。如果你也设置了right，你就不需要width: 100%了。也让它成为position:relative。如下所示：
#nav-div {
position: relative;
height: 50px;
}
#nav-links {
position:absolute;
left: 0;
right: 0;
...
}将50px更改为您的肚脐高度。
Stack Overflow用户
发布于 2015-04-06 23:23:27
我最后这么做的方式是：
ul {
position: absolute;
width: 100%;
right: 0px;
left: 0px;
li {
width: 100%;
a {
width: @small-width; //defined with my variables
margin: 0px auto;
display: block;
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29478820
复制相关文章
相似问题
腾讯云开发者
