更改嵌套列表的顺序

Posted 2023-03-06

【中文标题】更改嵌套列表的顺序

【英文标题】：change the order of nested list

【发布时间】：2017-03-14 15:53:44

【问题描述】：

您好，感谢您的检查。

我有一个列表，它有多个嵌套。我想更改这两个列表的顺序，我想知道这是否可以仅使用 css？

列表项 1 列表项 2 列表项 2.1 列表项 2.2 列表项 3

我想将顺序更改为：

列表项 1 列表项 2 列表项 3 列表项 2.1 列表项 2.2

由于列表的长度是动态的，我不能使用绝对定位或类似的东西。

【问题讨论】：

你为什么用 flexbox 来标记这个？你在使用 flexbox 吗？你的标记怎么样？你的CSS？

嗯，如果列表是动态的，为什么不在代码而不是 css 中更改它？我不知道 css 是否可以做到这一点，但这肯定不是它的用途。

如果您使用flexbox，您可以使用order 移动包含子列表的li，但是您将无法将lis 移动到父列表。你为什么要这样做？请分享您的代码，显示您到目前为止所做的尝试。

【参考方案1】：

这是一个棘手的问题，但您可以使用 CSS Flexbox order 属性以某种方式做到这一点。

您需要更改<ul> 和<li> 元素的属性。看看下面的代码 sn-p。

body 
  padding: 2em;


/* Resetting properties of <ul> */
ul 
  padding: 0;
  margin: 0;
  list-style: disc;


/* Applying Flex properties to <ul> */
ul.normal-list 
  display: flex;
  flex-direction: column;


/* Changing the order of all the <li>s except the <ul> with the class 'nested-list'  */
li.nested-list 
  order: 1;

<ul class="normal-list">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li class="nested-list">
    <ul>
      <li>List Item 2.1</li>
      <li>List Item 2.2</li>
    </ul>
  </li>
  <li>List Item 3</li>
  <li class="nested-list">
    <ul>
      <li>List Item 3.1</li>
      <li>List Item 3.2</li>
    </ul>
  </li>
  <li>List Item 4</li>
</ul>

【讨论】：

@Paulie_D 谢谢！指出错误，我的错！我已经更新了我的答案，我认为这可以很好地完成这项工作。

【参考方案2】：

不，你不能。您必须在客户端（javascript）或后端对呈现的数据进行排序；这种情况下css就束手无策了

【讨论】：

在某些特定情况下 css 可以做到这一点jsfiddle.net/m8k1g0vy

是的，但是如果有很多子列表，您应该为每个子列表编写 css 顺序。这就是为什么最好排序数据然后渲染它

我从来没有说过哪个选项更好我只是反对你的不，你不能。 ...正如我在评论中指出的特定情况可以使用