CSS更改移动菜单项大小

Question

我是css的新手，我对此有些麻烦。

我有这个代码的html页面：

 #menu1 li { display: inline-block; width: 100%; } /*Style for menu links*/ #menu1 li a { display: block; min-width: 140px; height: 50px; text-align: center; line-height: 50px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #111; background: #f2f2f2; text-decoration: none; } /*Hover state for top level links*/ #menu1 li:hover a { background: #e0e0e0; } ul#menu1 { position: static; display: none; } ul.menu1 { position: static; display: none; } .show-menu { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; background: #19c589; text-align: center; padding: 10px 0; display: none; } /*Hide checkbox*/ input[type=checkbox] { display: none; } input[type=checkbox]:checked~#menu1 { display: block; } @media screen and (max-width: 760px) { li#menu1 { margin-bottom: 1px; } li.menu1 { margin-bottom: 1px; } } .show-menu { display: block; } 

 <head> <meta charset="UTF-8"> <title>CSS Only Navigation Menu</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <label for="show-menu" class="show-menu">Show Menu</label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu1" class="menu1"> <li><a href="#">Home</a></li> <li><a href="#">About ?</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </body> 

当我在移动设备上打开此页面时，我会看到此按钮和菜单项

https://s27.postimg.org/8e5z7aw2r/image.png

我希望将菜单项大小更改为相同的“显示菜单”按钮大小。

但是当我尝试将宽度参数添加到＃menu1 li时，它只将宽度尺寸改为右边。 我做错了什么？

Answer 1

将此添加到您的CSS

.menu1{
padding-left:0;}

Answer 2

您需要从列表中删除padding-left。 代码如下：

ul{
padding-left: 0;
}

http://codepen.io/powaznypowazny/pen/peEXMZ