如何将响应式页面的 ul 置于 div 的中心

Question

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

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

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

Fiddle Link

Answer 1

移除 li 的显示

display: list-item;

Answer 2

我的回答的另一个编辑版本：使用这些设置：

#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; for #number_container （另见我的 fiddle https://jsfiddle.net/f77ujsqb/1/ ），它将最后一行居中对齐。

如何将响应式页面的 ul 置于 div 的中心

How to center a ul in a div for a responsive page

html

css

html-lists

responsive-design