如何在ul中显示一个li在其他li之上？答案

【问题标题】：How to display one single li above others in ul?如何在ul中显示一个li在其他li之上？
【发布时间】：2022-01-06 01:16:30
【问题描述】：

大家早上好！我有这样的情况：有一个旧的Perl 代码，我有一个看起来像这样的<ul>（伪代码）：

<ul>
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
    my $resp =api_request... # basically the fetch process
    if ($error ne '') {
        <li>$error</li>
    }
    <li>option 5</li>
</ul>

由于这段代码很旧并且将被重写，我需要一个临时修复^=L 是否有可能以某种方式显示第 4 个 <li>（有错误的那个）高于所有其他代码？如何使它看起来像这样：

错误
选项 1
选项 2
选项 3
选项 5

【问题讨论】：

“有一个旧的 Perl 代码...”：请提供有关您正在使用的 Perl 模块的更多信息。请参阅minimal reproducible example 了解更多信息
在打开 <ul> 标签后移动 f ($error ne '') { ... } 块。示例代码不完整，无法进行评估。
我说得对吗，有时 ul 会有 4 个项目，有时会有 5 个项目？

标签： html css perl

【解决方案1】：

显而易见的解决方案是在开始打印列表之前执行 API 调用。然后，如果您知道自己有错误，可以在显示列表的其余部分之前显示它。

【讨论】：

【解决方案2】：

如果您知道总会有第 4 个 li 要移动到顶部，您可以使 ul 弯曲并重新排列项目：

ul {
  display: flex;
  flex-direction: column;
}

li:nth-child(1) {
  order: 2;
}

li:nth-child(2) {
  order: 3;
}

li:nth-child(3) {
  order: 4;
}

li:nth-child(4) {
  order: 1;
}

li:nth-child(5) {
  order: 5;
}

<ul>
  <li>option 1</li>
  <li>option 2</li>
  <li>option 3</li>
  <li>error</li>
  <li>option 5</li>
</ul>

但是，如果您不知道总是会出现错误消息，则需要更改 PERL（即使没有错误，也始终在其中输出一个 li）或使用一些 Javascript 发布流程以看看是否有错误 li 。也许这可以通过测试ul中是否有4个或5个项目来完成？我们对真实案例的了解还不够，无法肯定地说。

【讨论】：