Question

我有这个代码：

    <ul class="careplus-infolist">
    <li>
        <i class="careplus-bgcolor-two fa fa-envelope"></i>
        <span><a href="mailto:info@email.com" target="_blank">info@email.com</a></span>
        <span><a href="mailto:info@pec.email.com" target="_blank">info@pec.email.com</a></span>                                        
    </li>
    <li>
        <i class="careplus-bgcolor-two fa fa-clock-o"></i>
        <span>9:00 - 13:00</span>
        <span>15:00 - 18:00 pm</span>  
    </li>
    <li>
        <i class="careplus-bgcolor-two fa fa-map-marker"></i>
        Main Street 22
        09030 Los Angeles CA  
    </li>
</ul>

我想将第一个li标签移到列表的末尾。我的意思是，包含电子邮件地址的li标签位于包含电子邮件地址的li标签之后

大街22号 09030洛杉矶CA

对于此操作，我无法手动添加类，它是自动生成的代码，并且我只能使用CSS（而不是JavaScript）。

这是全屏视图的水平列表，而移动视图是垂直列表

Answer 1

您可以使用CSS flex-direction，然后为li:first-child设置“顺序”

ul.careplus-infolist {
    display: flex;
    flex-direction: column;
}

ul.careplus-infolist li:first-child {
  order: 3;
}

<ul class="careplus-infolist">
<li>
    <i class="careplus-bgcolor-two fa fa-envelope"></i>
    <span><a href="mailto:info@email.com" target="_blank">info@email.com</a></span>
    <span><a href="mailto:info@pec.email.com" target="_blank">info@pec.email.com</a></span>                                        
</li>
<li>
    <i class="careplus-bgcolor-two fa fa-clock-o"></i>
    <span>9:00 - 13:00</span>
    <span>15:00 - 18:00 pm</span>  
</li>
<li>
    <i class="careplus-bgcolor-two fa fa-map-marker"></i>
    Main Street 22
    09030 Los Angeles CA  
</li>
</ul>

CSS-将第一个<li>元素移到末尾

1 个答案: