html - 当使用带有 flex 属性的 li 时，为什么元素不在一行中？

Question

我是 css 的新手 flex 盒。

下面，我正在尝试制作我的 5 li元素在 div#master-edit-options 内部垂直和水平居中定位使用 flex 属性。

如何防止元素出现在多行上？为什么会出现这样的情况？

div#master-edit-options li {
  float: left;
  border: 1px solid #000;
  width: 20%;
  height: 62%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-left: 4%;
  margin-right: 3%;
  font-size: 11px;
  background-color: #e1e1e1;
  padding-left: 9px;
  padding-right: 9px;
}

div#master-edit-options {
  height: 15%;
  width: 100%;
  border: 1px solid #000;
  background-color: yellow;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul,
li {
  margin: zero;
  padding: zero;
}

<div id="master-edit-options">
  <ul>
    <li>
      <span><img src="img/Save.gif"></span>
      <span>SAVE</span>
    </li>
    <li>
      <span><img src="img/Print.gif"></span>
      <span>PRINT</span>
    </li>
    <li>
      <span><img src="img/Delete.gif"></span>
      <span>DELETE</span>
    </li>
    <li>
      <span><img src="img/Clear.png"></span>
      <span>CLEAR</span>
    </li>
    <li>
      <span><img src="img/Close.gif"></span>
      <span>CLOSE</span>
    </li>
  </ul>
</div>

Answer 1

将 display:flex; 放在 ul 上，因为它是实际容器而不是 div。

关于 Flex 的好读物:https://css-tricks.com/snippets/css/a-guide-to-flexbox/