当前位置: 首页 > 面试题库 >

如何居中排列无序列表?

胡璞瑜
2023-03-14
问题内容

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

获得与以下相同的结果:

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


问题答案:

ul {

  display: table;

  margin: 0 auto;

}


<html>



<body>

  <ul>

    <li>56456456</li>

    <li>4564564564564649999999999999999999999999999996</li>

    <li>45645</li>

  </ul>

</body>



</html>


 类似资料:
  • 问题内容: 通常在列表中的页脚中有一组链接,例如: 我希望div#footer中的所有内容都水平居中。如果这是一个段落,则只需说:。或者,如果我知道宽度,我可以说。 但是,如何在不设置固定宽度的情况下将无序列表项居中? 编辑:澄清-列表项应该彼此相邻,而不是下面。 问题答案: 如果您的列表项可以,解决方案非常简单: 但是,很多时候您必须在上使用。在这种情况下,以下CSS将起作用:

  • 我有下面的dataframe示例。 给定一个模板,我想根据列的新顺序更改行的顺序,因此它看起来像: 我找到了下面的线程,但是洗牌是随机的。Cmmiw。 洗牌数据帧行

  • 我有一个java中的double列表,我想按降序排列ArrayList。 输入ArrayList如下所示: 输出应该是这样的

  • 问题内容: 如果我有列表,如何以任意方式重新排序商品? 编辑:我不想洗牌。我想以预定义的方式对它们进行重新排序。(例如,我知道旧列表中的第3个元素应成为新列表中的第一个元素) 问题答案: 你可以这样

  • 问题内容: 使用以下HTML,将列表显示为两列的最简单方法是什么? 所需显示: 该解决方案必须能够在Internet Explorer上运行。 问题答案: 现代浏览器 利用css3列模块来支持您要寻找的内容。 CSS: 旧版浏览器 不幸的是,要获得IE支持,您将需要一个涉及JavaScript和dom操作的代码解决方案。这意味着,只要列表内容发生更改,您就需要执行将列表重新排序为列并重新打印的操作

  • 如何将按排序顺序转换为而不更改()?我们希望保留和。 将2,3,1添加到将其排序为1,2,3。从创建一个将具有2,3,1的顺序。中的和方法也将具有2,3,1的顺序。我猜这与的实现有关。