Question

我是css的新手，我遇到了一些麻烦。

我的html页面包含以下代码：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

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

我希望将菜单项大小更改为相同的＆＃34;显示菜单＆＃34;按钮大小。

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

Answer 1

将此添加到您的css

.menu1{
padding-left:0;}

Answer 2

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

ul{
padding-left: 0;
}

CSS更改移动菜单项大小

2 个答案: