выравнивают неупорядоченный список предметов

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>