无法将列表水平居中

Question

我想将列表放在div内部居中，但不能。 ol元素居中（占据整个屏幕宽度）。但是所有li元素都漂浮在ol的右侧（左侧还留有一些空间）。

#List1 {
  overflow: hidden; 
  text-align: center;
  background-color: #e9400d;
  width: 100%;
}

#List1 ol {
    background-color: blue;
}

#List1 li {
    margin: 0px auto;
    background-color: lightskyblue;
}

<div id="List1">
  <ol>
    <li>
      Elem1
    </li>
    <li>
      Elem2
    </li>
  </ol>
</div>

Answer 1

您想让李的中心吗？如果是这样，您可以将div的文本对齐方式移除，并像这样更改li的宽度百分比...

#List1 {
    overflow: hidden; 
    background-color: #e9400d;
    width: 100%;
}

#List1 li {
    width: 80%;
    margin: 0px auto;
    background-color: lightskyblue; 
}

（宽度不一定要是80％，您可以一直玩到开心为止）

Answer 2

此解决方案应该可行：

#List1 {
  overflow: hidden;
  background-color: #e9400d;
  width: 100%;
  text-align: center;
  list-style-position: inside;
}

#List1 li {
  background-color: lightskyblue;
}

<div id="List1">
  <ol>
    <li>
      Elem1
    </li>
    <li>
      Elem2
    </li>
  </ol>
</div>

Answer 3

尝试一下：

   #List1 ol li 
      {
         display:inline;
      }

   #List1 
      {
        text-align: center; 
      }
   #List1 ol 
      { 
        list-style: none; 
      }