html - 在两行中显示 li 元素标题，以适应最大宽度

Question

Jsfiddle 作为， https://jsfiddle.net/9qyv03u3/

如何将 li 标题字符串分成两行，以便它们适合最大宽度？

在 jsfiddle 中，菜单项放置在一行中，但在 firefox 中我的 50% 宽度容器中，它呈现为，

这将导致用户按下错误的菜单选项。所以，我更喜欢水平放置的所有菜单选项，例如，

   Save & Run  | Run saved |  Run selected  |
      suite    |   suite   |      tests     |

Answer 1

你可以通过使 ul 成为 flexbox 来做到这一点:

ul { 
  display: flex;
}

ul { 
  display: flex;
  width: 20em;
  border: 4px solid gray;
  padding: 0.5em 2em;
  margin: 5em auto;
  list-style: none;
  font: 14px verdana;
}

li {
  margin: 20px 30px 10px 0;
  border-right-style: dotted;
  padding-right : 15px;
  text-align: center;
}

<ul>
  <li>Save & Run suite</li>
  <li>Run saved suite</li>
  <li>Run selected tests</li>
</ul>

... 或者让每个 li 成为一个 table-cell:

li {
  display: table-cell;
}

ul { 
  width: 20em;
  border: 4px solid gray;
  padding: 0.5em 2em;
  margin: 5em auto;
  list-style: none;
  font: 14px verdana;
}

li {
  display: table-cell;
  margin: 20px 30px 10px 0;
  border-right-style: dotted;
  padding-right : 15px;
  text-align: center;
}

<ul>
  <li>Save & Run suite</li>
  <li>Run saved suite</li>
  <li>Run selected tests</li>
</ul>