调整移动设备菜单按钮的大小
提问于 2013-09-11 08:22:27
我目前正在整理我的网站的移动设备和小屏幕，我有点困在如何调整我的菜单。我有8个菜单按钮作为无序列表的一部分，如下所示：
<ul class="menu">
<li class="menubar"><a class="menulink" href="/">Home</a></li>
..
.. total of 8 <li> menu buttons
</ul>“menulink”a类将每个链接设置为128 to。乘以8，它与我1024 my的页面宽度完全一致。我使用@media查询来针对这些更改，并且在移动设备上希望有两行4个按钮。我想，四个按钮的组合宽度需要等于屏幕宽度。我怎样才能做到这一点？
菜单的CSS如下：
.menu{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;}
li.menubar{float:left;}
a.menulink{
display:block;
width:128px;
background-color:#333333;
text-align:center;
padding-top:5px;
padding-bottom: 5px;
text-decoration:none;
text-transform:uppercase;}
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-09-11 08:44:09
.menu{
width:100%;
overflow:hidden;
}
.menu li{
width:25%;
overflow:hidden;
float:left;
margin-top:10px;
}
.menu li a{
width:100%;
padding:20px;
font-size:20px;
background:lightgreen;
}这是一个演示
现在，要将它安装在较小的屏幕中，请使用@media查询..。例如，更改字体大小和填充量以适应较小的屏幕。
@media screen and (max-width:480px){
.menu li a{
padding:8px;
font-size:16px;
}
}Stack Overflow用户
发布于 2013-09-11 08:26:56
我认为让这两台计算机(屏幕更大)和移动设备(屏幕更小)舒适的更好的方法是让您的大部分属性以%为单位，而不是以像素(固定的)为单位。
喜欢
宽度:80%；
Stack Overflow用户
发布于 2013-09-11 08:31:51
我将使每个li项目width: 25%。这样，不管浏览器的宽度是多少，您的li总是在4行中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18746417
复制相关文章
点击加载更多
腾讯云开发者
