我有一个垂直的项目清单:
ul {
text-align: center;
padding: 0;
}
li {
list-style: none;
background: red;
padding: 4px;
margin: 4px;
width: auto;
}

<ul>
<li>Something</li>
<li>Something else</li>
<li>Nothing</li>
</ul>
&#13;
https://jsfiddle.net/6roe6y30/5/
我希望将列表项水平居中于ul
,但我希望它们的宽度基于内部的内容。例如:&#39;嗨&#39;李应该是最小的,还有其他的东西。李应该是最广泛的。
在默认状态下,列表项填充ul的宽度。我尝试了display
的变体,但没有任何影响。
由于我使用的CMS的限制,我无法改变HTML。
有人知道是否有办法做到这一点?
答案 0 :(得分:2)
只需将文字换成<span>
s,然后在<span>
上设置背景色CSS。
HTML:
<ul>
<li><span>Something</span></li>
<li><span>Something else</span></li>
<li><span>Hi</span></li>
</ul>
CSS:
ul {
text-align: center;
padding: 0;
}
li {
list-style: none;
}
span {
background: red;
padding: 4px;
margin: 4px;
width: auto;
}
答案 1 :(得分:2)
ul {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0;
}
li {
list-style: none;
background: red;
padding: 4px;
margin: 4px;
}
<ul>
<li>Something</li>
<li>Something else</li>
<li>Nothing</li>
<li>Hi</li>
</ul>
答案 2 :(得分:0)
您可以通过将列表元素视为表中来执行此操作:
li {display:table-cell; }
但这会把他们粘在一起。
如果您需要将它们分开,我建议使用 flex