对齐无序列表项
align unordered list items
我有无序列表:
-Item1-
-Item2Item2-
Item3Item3Item
每个元素都有不同的长度。
我想创建一个列表,其中所有项目都具有相同的长背景颜色,文本对齐方式如下:
-----------------
-----Item1-------
-----------------
-----------------
---Item2Item2----
-----------------
-----------------
-Item3Item3Item3-
-----------------
这里---是彩色背景。我该怎么做?
将 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>
我有无序列表:
-Item1-
-Item2Item2-
Item3Item3Item
每个元素都有不同的长度。 我想创建一个列表,其中所有项目都具有相同的长背景颜色,文本对齐方式如下:
-----------------
-----Item1-------
-----------------
-----------------
---Item2Item2----
-----------------
-----------------
-Item3Item3Item3-
-----------------
这里---是彩色背景。我该怎么做?
将 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>