Question

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

正如您在图片中看到的那样，我的图标列表被推向右侧，而不是占据它们所包含的div的100％宽度。

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

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

我还会添加使用的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

显示无序列表继续向div的右侧推送

1 个答案: