如何居中排列无序列表？

小编典典

如何居中排列无序列表？

css

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

获得与以下相同的结果：

HTML

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

CSS

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

阅读 1670

2020-05-16

共1个答案

小编典典

ul {

  display: table;

  margin: 0 auto;

}


<html>



<body>

  <ul>

    <li>56456456</li>

    <li>4564564564564649999999999999999999999999999996</li>

    <li>45645</li>

  </ul>

</body>



</html>

2020-05-16