我想将左侧浮动列表项目居中

Question

我有这样的事情：

http://codepen.io/apijay/pen/RPxRNN

<ul>
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
  <li>Option 4</li>
  <li>Option 5</li>
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
  <li>Option 4</li>
  <li>Option 5</li>
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
  <li>Option 4</li>
  <li>Option 5</li>
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
  <li>Option 4</li>
  <li>Option 5</li>
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
  <li>Option 4</li>
  <li>Option 5</li>
</ul>

li {
  margin: 0 10px;
  display: inline;
}

ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
  text-align: center;
}

+ ---------------------------------------------- ------------------------------ +

选项1 |选项2 |选项3 |选项4 |选项5 |备选方案6 |

------------------------选项7 |选项8 ---------------------------------

+ ---------------------------------------------- ------------------------------ +

但是，我希望有这样的东西，这样当屏幕尺寸改变时，左右尺寸的边距相等

+ ---------------------------------------------- ------------------------------ +

----选项1 |选项2 |选项3 |选项4 |选项5选项6 ----

----选项7 |备选方案8

+ ---------------------------------------------- ------------------------------ +

Answer 1

要使ul居中，请使用margin: auto;代替text-align: center;。 （后者以ul的内容为中心。）

然后你需要小心li儿童包装，你可以这样阻止：

li {
  white-space: nowrap;
}

CodePen