Question

编辑：我正在添加图片以更好地传达所需的结果：

[！[在此处输入图像说明] [1]] [1]

这是解释清楚的小提琴：https://jsfiddle.net/c7jazc9z/2/

我有一个无序列表，左边对齐的项目。我希望它基于最长的项目在屏幕上居中。这可以通过display：inline-block轻松实现。

但是，我还想在此列表中设置max-width，这就是出现问题的地方。当列表项换行时（由于宽度有限），右侧会出现空白区域。

然后看起来列表不在标题下方（尽管技术上是这样）。

如何解决这个问题？（使用任何其他HTML元素都可以）

body {
  background: gray;
  margin: 100px 0;
  text-align: center;
}

div {
  max-width: 300px;
  margin: 0 auto;
}

ul {
  background: pink;
  display: inline-block;
  list-style-type: none;
  padding: 0;
  text-align: left;
}

li {
  font-size: 24px;
}

<div>
  <h1>Headline</h1>
  <ul>
    <li>This is a the longest line, at least here.</li>
    <li>This one's short.</li>
    <li>And this one so and so.</li>
  </ul>
</div>

Answer 1

这是你想要的吗？

＆＃13;

body {
  background: gray;
  margin: 100px 0;
  text-align: center;
}

div {
  max-width: 300px;
  margin: 0 auto;
}

ul {
  background: pink;
  display: inline-block;
  list-style-type: none;
  padding: 0;
  text-align: left;
}

li {
  font-size: 24px;
}

＆＃13;

<div>
  <ul>
    <li>
      <center>This is a the longest line, at least here.</center>
    </li>
    <li>
      <center>This one's short.</center>
    </li>
    <li>
      <center>And this one so and so.</center>
    </li>
  </ul>
</div>

＆＃13;

如何在文本左对齐时居中<ul>内容，并在其上设置max-width？

1 个答案: