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

Posted 2023-03-24

【中文标题】如何在ul中显示一个li在其他li之上？

【英文标题】：How to display one single li above others in ul?

【发布时间】：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 个项目？

【参考方案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个项目来完成？我们对真实案例的了解还不够，无法肯定地说。