如何居中排列无序列表？

  • Z时代
  • 2024-01-10
  • 分类：问答

我需要居中排列一个宽度未知的无序列表，同时仍然保持列表项对齐。

获得与以下相同的结果：

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

div { text-align: center; }
ul { display: inline-block; text-align: left; }

除了我<ul>没有父母div。ul { margin: 0 auto; }无法使用，因为我没有固定的宽度。ul { text-align:

center; }不起作用，因为列表项将不再保持对齐。那么，如何<ul>在保持<li>s对齐的同时居中（没有父div包装器）呢？

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

：也许我的措辞是不是最好的…第一个代码块已经工作…我需要的是做

的<div>包装，如果这当然是可能的。浮动花样？伪元素技巧？一定有办法。

回答：

ul {

  display: table;
  margin: 0 auto;
}
<html>
<body>
  <ul>
    <li>56456456</li>
    <li>4564564564564649999999999999999999999999999996</li>
    <li>45645</li>
  </ul>
</body>
</html>

以上是 如何居中排列无序列表？ 的全部内容， 来源链接： utcz.com/qa/434602.html

回到顶部