<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;
}