嘿，刚接触Flexbox很容易踩这种小坑，我来帮你捋清楚问题出在哪，以及怎么修复：

问题出现的原因 #

你现在的代码里有两个关键问题导致li换行：

1. Flex容器层级错误：你给div#master-edit-options加了display:flex，但它的直接子元素是<ul>，不是<li>。所以Flex布局只作用在div和ul之间，ul本身还是默认的块级元素，里面的li自然不会遵循Flex的排列规则。
2. 元素总宽度超出容器：你的li设置了width:20%，再加上margin-left:4%和margin-right:3%，单个li的总占用宽度是20% + 4% +3% =27%，5个加起来就是135%，远远超过容器的100%宽度，必然会换行。另外你给li加了float:left，这和Flex布局冲突，完全没必要保留。

修复方案 #

我们需要调整Flex容器的层级，同时修正li的宽度和margin设置，具体步骤如下：

1. 给<ul>添加Flex布局属性，让它成为li的Flex容器；
2. 移除li的float:left属性；
3. 调整li的宽度和间距，确保总宽度不超过容器（或者用flex:1让li自动均分空间）；
4. 保持div#master-edit-options的Flex属性，用来让ul在div里垂直水平居中。

修改后的完整代码 #

CSS

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

div#master-edit-options ul {
  display: flex;
  flex-wrap: nowrap; /* 明确禁止换行，默认就是nowrap，可写可不写 */
  width: 100%; /* 让ul占满div的宽度，方便li均分 */
  gap: 2%; /* 用gap代替margin，更简洁的控制元素间距 */
  padding: 0 1%; /* 左右加一点内边距，避免li贴边 */
}

div#master-edit-options li {
  border: 1px solid #000;
  flex: 1; /* 让每个li自动均分ul的可用空间 */
  height: 62%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 11px;
  background-color: #e1e1e1;
  padding: 0 9px;
}

ul, li {
  margin: 0; /* 修正你之前写的无效值zero */
  padding: 0;
  list-style: none; /* 去掉li默认的列表符号，更整洁 */
}

HTML

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

修改后li会在一行内水平排列，同时整个ul会在div容器里保持垂直水平居中，完美解决你的问题～

内容的提问来源于stack exchange，提问作者ADH - THE TECHIE GUY