对齐无序列表项

Question

我有无序列表：

-Item1-
-Item2Item2-
Item3Item3Item

每个元素都有不同的长度。我想创建一个列表，其中所有项目都具有相同的长背景颜色，文本对齐方式如下：

-----------------
-----Item1-------
-----------------

-----------------
---Item2Item2----
-----------------

-----------------
-Item3Item3Item3-
-----------------

这里---是彩色背景。我该怎么做？

Answer 1

将 ul 的显示设置为 inline-block 或 block 并将宽度设置为 auto 将使项目适应最宽的选项。

ul {
  width: auto;
  padding: 0;
  margin: 0;
  display: inline-block;
  float: left;
  clear: both;
}
li {
  background: lightblue;
  width: 100%;
  padding: 10px;
  text-align: center;
  list-style: none;
  margin-bottom: 10px;
}

<ul>
  <li>Item 1</li>
  <li>Item 2 Item 2</li>
</ul>
<ul>
  <li>Item 1</li>
  <li>Item 2 Item 2</li>
  <li>Item 3 Item 3 Item 3</li>
  <li>Item 4 Item 4 Item 4 Item 4</li>
</ul>
<ul>
  <li>Item 1</li>
  <li>Item 2 Item 2</li>
  <li>Item 3 Item 3 Item 3</li>
  <li>Item 4 Item 4 Item 4 Item 4</li>
  <li>Item 5 Item 5 Item 5</li>
  <li>Item 6 Item 6 Item 6 Item 6 Item 6</li>
</ul>

对齐无序列表项

align unordered list items

html

css

text-align