水平居中一个只包含其内容宽度的项目列表

时间:2017-02-21 00:16:08

标签: html css

我有一个垂直的项目清单:



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;
&#13;
&#13;

https://jsfiddle.net/6roe6y30/5/

我希望将列表项水平居中于ul,但我希望它们的宽度基于内部的内容。例如:&#39;嗨&#39;李应该是最小的,还有其他的东西。李应该是最广泛的。

在默认状态下,列表项填充ul的宽度。我尝试了display的变体,但没有任何影响。

由于我使用的CMS的限制,我无法改变HTML。

有人知道是否有办法做到这一点?

3 个答案:

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

在此处查看此行动:https://jsfiddle.net/kylemartin/8vyapLL9/

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