css - 我想居中左浮动列表项

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 child 包裹，你可以这样防止:

li {
  white-space: nowrap;
}

CodePen