html - 显示无序列表一直推到div的右边

Question

我很难在 div 中对齐无序列表。

正如您在图片中看到的，我的图标列表被推到右边，而不是占据它们所在的 div 的 100% 宽度。

我很确定这是因为我设置了 list-style-type:none

我不确定如何在不设置负边距的情况下解决这个问题。

我还将添加尚未使用的代码:

div#mobile-nav {
  position: absolute;
  width: 100%;
  height: auto;
  background-color: orange;
  padding: 0px;
  margin: 80px 0px 0px 0px;
}
ul.responsive {
  min-width: 100%;
  margin: 0 auto;
  list-style-type: none;
}
ul.responsive li {
  float: none;
}
ul.responsive li a {
  text-align: center;
  color: black;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid black;
  height: 56px;
  display: block;
  width: 100%;
}
ul.topnav li {
  display: none;
}
ul.topnav li.icon {
  float: right;
  display: inline-block;
}

<div id="mobile-nav">
  <ul class="responsive">
    <li> <a href=""> HOME </a> </li>
    <li> <a href=""> ABOUT US </a> </li>
    <li> <a href=""> PROJECTS </a> </li>
    <li> <a href=""> CONTACT US </a> </li>
  </ul>
</div>

Answer 1

重置 <ul> 的默认填充 :

div#mobile-nav {
  position: absolute;
  width: 100%;
  height: auto;
  background-color: orange;
  padding: 0px;
  margin: 80px 0px 0px 0px;
}
ul.responsive {
  min-width: 100%;
  margin: 0 auto;
  padding: 0;                       /* Here, reset like this! */
  list-style-type: none;
}
ul.responsive li {
  float: none;
}
ul.responsive li a {
  text-align: center;
  color: black;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid black;
  height: 56px;
  display: block;
  width: 100%;
}
ul.topnav li {
  display: none;
}
ul.topnav li.icon {
  float: right;
  display: inline-block;
}

<div id="mobile-nav">
  <ul class="responsive">
    <li> <a href=""> HOME </a> </li>
    <li> <a href=""> ABOUT US </a> </li>
    <li> <a href=""> PROJECTS </a> </li>
    <li> <a href=""> CONTACT US </a> </li>
  </ul>
</div>