css - 在一个 ul 中均匀分布 li 的中心中间 li

Question

我有一个 jsfiddle here我的问题。我想在 ul 中均匀分布未知数量的 li。但是正如您从 fiddle 中看到的那样，中间的 li 不在标题的正下方，因此它没有正确居中。此外，如果您检查每个 li，它们具有不同的宽度。

如何修复它，使中间的 li 始终在中间，以便与标题对齐？

Answer 1

方法#01:

在.strweak-list的样式中添加table-layout: fixed

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.strweak-header {
  text-align: center;
}
.strweak-list {
  table-layout: fixed;
  display: table;
  width: 100%;
  list-style: none;
}
.cell {
  display: table-cell;
  text-align: center;
}

<h5 class='strweak-header'>strongAgainst</h5>
<ul class="strweak-list">
  <li class="cell">water</li>
  <li class="cell">ghost</li>
  <li class="cell">ground</li>
</ul>

方法#02:

您可以使用 css FlexBox还有:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ader {
  text-align: center;
}
.strweak-header {
  text-align: center;
}
.strweak-list {
  text-align: center;
  list-style: none;
  display: flex;
}

.strweak-list li {
  flex-basis: 33.33%;
}

<h5 class='strweak-header'>strongAgainst</h5>
<ul class="strweak-list">
  <li>water</li>
  <li>ghost</li>
  <li>ground</li>
</ul>