对齐无序列表项

Question

我的无序列表：

-Item1-
-Item2Item2-
Item3Item3Item

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

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

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

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

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

Answer 1

将ul的显示设置为inline-block或block并将宽度设置为auto将使这些项目适合最广泛的选项。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;