在两行中显示 li 元素标题，以适应 max-width

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>

Answer 2

您可以将列表项显示为 table 个单元格。您可能需要稍微调整边距和填充，但这样项目将始终彼此相邻。

ul{
  display: table; 
  width: 20em;
  border: 4px solid gray;
  margin: 5em auto;
  padding: 20px 0 0 0;
  list-style: None;
  height: 30px;
}

li {
  display: table-cell;
  border-right-style: dotted;
  padding-right : 15px;
}

<ul>
  <li>Questions</li>
  <li>Tags liek bla blo foo bar bak nam plo and sni</li>
  <li>Users</li>
</ul>

Answer 3

CSS 表我会建议。

ul {
  width: 20em;
  border: 4px solid gray;
  padding: 0.5em 2em;
  margin: 5em auto;
  list-style: None;
  height: 30px;
  display: table;
  table-layout: fixed;
}
li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-right: 1px dotted black;
}

<ul>
  <li>Questions & Answers</li>
  <li>Tags</li>
  <li>Users</li>
</ul>

Answer 4

您还可以使用 column-count 属性来定义 CSS 列。这是达到预期效果的一种快速简便的方法。

ul {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  width: 25em;
  border: 4px solid gray;
  padding: 1.5em;
  margin: 5em auto;
  list-style: None;
  font-size: 12pt;
  font-family: Arial, sans-serif;
}
li {
  text-align: center;
  border-right-style: dotted;
  padding-right: 10px;
}
li:last-child {
  border: 0;
}

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

在两行中显示 li 元素标题，以适应 max-width

Display li element caption in two lines, to fit into max-width

html

css

html-lists