li标签内使用display:flex 导致li标签失去标号

<style>
    .mid_content ul li{
        display: flex;
        justify-content: space-between;
}
</style>
 <div class="hide mid_content" name="情况交流">
     <ul>
        <li><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></li>
        <li><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></li>
        <li><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></li>
        <li><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></li>
        <li><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></li>
        <li><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></li>
     </ul>
   </div>

我设置了flex,目的是使a标签与span标签左右对齐,放弃使用float属性,对齐方式结果很成功但是前面的圆点消失,我又尝试在li标签内插入div标签


 <div class="hide mid_content" name="情况交流">
      <ul>
        <li>
          <div class="mid_ul"><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></div>
        </li>
         <li>
            <div class="mid_ul"><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></div>
         </li>
         <li>
            <div class="mid_ul"><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></div>
         </li>
           <li>
              <div class="mid_ul"><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></div>
           </li>
            <li>
               <div class="mid_ul"><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></div>
            </li>
             <li>
               <div class="mid_ul"><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></div>
              </li>
             </ul>
    </div>

结果仍然没有改变,查了flex发现flex model概念是错误的。display:flex不在项目上,而是在容器块上,它应该在<UL>中,但是我的场景下还是想使用flex属性,所以最后我使用过::before伪类来自己画出这个点

.mid ul li::before {
        content: "";
        position: absolute;
        border-radius: 50%;
        margin-top: 2.4rem;
        margin-left: -1rem;
        width: 0.4rem;
        height: 0.4rem;
        background: #005b9b;
    }
    

同样使用有序列表的话使用CSS Counter 来模拟十进制列表。 ,放置一个 :before列表项上的伪类。这样就有了 display: flex ,你的号码还在那里......

更好的是,如果您只想对数字进行不同的样式设置,同样可以!!

.lst:before {
    counter-increment: section;
    content: counter(section) ".";
    position: absolute;
    margin-left: -20px;
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值