Question

我正在尝试在响应式页面中设置一个居中的数字列表。我遇到的问题是，当您调整屏幕宽度时，无序列表中的列表项不再位于包含div的内部。我已经删除了ul元素上的默认填充，但我认为缺少一些东西可以将它们整合在一起。有人能告诉我哪里出错了吗？

＆＃13;

#content {
  background-color: yellow;
  overflow: hidden;
  padding: 0 15px;
  width: 100%;
  box-sizing: border-box;
}

#heading {
  text-align: center;
}

#number_container {
  overflow: hidden;
  background-color: #07c;
  width: auto;
}

ul {
  padding-left: 0;
}

li {
  list-style: none;
  display: list-item;
}

ul li a {
  float: left;
  padding: 5px;
  min-width: 35px;
  margin-right: 2px;
  min-height: 35px;
  line-height: 28px;
  color: #333;
  text-decoration: none;
  text-align: center;
  background-color: #fff;
  border: #fff solid 1px;
}

＆＃13;

<div id="content">
  <div id="heading">Centered Text</div>
  <div id="number_container">
    <ul>
      <li><a id="1">1</a></li>
      <li><a id="2">2</a></li>
      <li><a id="3">3</a></li>
      <li><a id="4">4</a></li>
      <li><a id="5">5</a></li>
      <li><a id="6">6</a></li>
      <li><a id="7">7</a></li>
      <li><a id="8">8</a></li>
      <li><a id="9">9</a></li>
      <li><a id="10">10</a></li>
      <li><a id="11">11</a></li>
      <li><a id="12">12</a></li>
      <li><a id="13">13</a></li>
      <li><a id="14">14</a></li>
      <li><a id="15">15</a></li>
      <li><a id="16">16</a></li>
      <li><a id="17">17</a></li>
      <li><a id="18">10</a></li>
      <li><a id="19">11</a></li>
      <li><a id="20">12</a></li>
      <li><a id="21">13</a></li>
      <li><a id="22">14</a></li>
      <li><a id="23">15</a></li>
      <li><a id="24">16</a></li>
      <li><a id="25">17</a></li>
    </ul>
  </div>
</div>

＆＃13;

Fiddle Link

Answer 1

我的答案的另一个编辑版本：使用以下设置：

#number_container {
  overflow: hidden;
  background-color: #07c;
  text-align: justify;
}

ul {
  padding: 0;
}
li {
  display: inline-block;
  list-style: none;
}
ul li a {
  display: inline-block;
  padding: 5px 5px 3px 5px;
  margin: 5px;
  min-width: 35px;
  min-height: 35px;
  line-height: 37px;
  color: #333;
  text-decoration: none;
  text-align: center;
  background-color: #fff;
}

这会对齐你剩下的<li>元素的最后一行，你显然是针对的。 text-align: center;的另一种可能性是#number_container（另请参阅我的小提琴https://jsfiddle.net/f77ujsqb/1/），它将最后一行对齐。

Answer 2

从li

中移除显示

display: list-item;

如何将div中的ul居中设置为响应式页面

2 个答案: