如何使无序列表导航友好
[英]how to make a unordered list nav mobile friendly
问题描述
我正在尝试使网站上的导航响应式（最终对移动设备友好），但是我无法使其按我想要的方式工作。
理想情况下，在小于480像素的屏幕上，徽标应位于顶部，其他导航链接应在下方堆叠（每行一个），但现在我将为在移动屏幕上可辨认的所有内容做好准备。
我研究了很多不同的响应选项，但是导航方式的设置似乎无济于事。
该站点位于此处： http : //prettylushrecords.com/
相关HTML：
<body>
<ul id="navmenu">
<li><a href="http://prettylushrecords.storenvy.com/">STORE</a></li>
<li><a href="bands">BANDS</a></li>
<li><a href="releases.html">RELEASES</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
相关CSS：
#navmenu {
background: url(http://prettylushrecords.comoj.com/prettylushlogosmall.png) no-repeat center top;
position: relative;
margin: auto;
overflow: hidden;
padding: 0;
width: 100%;
}
li, li + li + li + li {
display: block;
float: left;
height: 220x;
width: 200px;
margin: 0;
padding: .5em 1%;
text-align: center;
vertical-align: middle;
width: 18%;
}
li + li + li {
margin-left: 20%;
padding: .5em 0;
}
li {
font-size: 2.5em;
color: #000;
line-height: 220px;
font-family: Courier, monospace;
font-weight: bold;
color: #bdb0b0;
}
@media only screen and (max-device-width: 480px) {
#navmenu {
background: url(http://prettylushrecords.comoj.com/prettylushlogosmall.png) no-repeat center top;
position: relative;
margin: auto;
overflow: hidden;
padding: 0;
width: 100%;
}
li {
font-size: 1em;
color: #000;
line-height: 100px;
font-family: Courier, monospace;
font-weight: bold;
color: #bdb0b0;
}
2 个解决方案
解决方案1
0 2013-12-09 05:44:57
继续尝试这个http://tinynav.viljamis.com/
这就是它的作用
....转换和导航到小屏幕的选定下拉菜单。 它还会自动选择当前页面，并为该项目添加selected =“ selected”。
解决方案2
0 2013-12-09 05:56:03
我真的建议以更简洁的方式来构造html标签。
<nav>
<ul>
<li>asdfad</li>
<li><div><img src="yourimage"/></div></li>
<li>asdf</li>
<li>asdf</li>
</ul>
</nav>
的CSS
不要这样做li + li + li（您只需要一个li即可设置所有lis的样式并查看css选择器），请尝试以下操作：
li{
display: block;
float: left;
height: 220x;
width: 200px;
margin: 0;
padding: .5em 1%;
text-align: center;
vertical-align: middle;
width: 18%;
}
@media only screen and (max-device-width: 480px){
float: none;
line-height: 5px;
}
尝试看看w3规范和其他网站如何设置标头。 始终使用inspect元素来了解它们的设置方式和CSS，这将为您提供帮助。
GL
如何使无序列表在移动视图上响应？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.