小编Nic*_*las的帖子

在具有相等空间分布的弹性项之间添加分界线

我有一个列表,其中包含具有自动宽度的不同项目(在我的情况下,不能给出固定的宽度).我使用justify-content: space-between是因为我的第一个项目必须从容器的开头开始,最后一个项目开始.

所有上述工作都很好,但每当我尝试在这些列表项之间添加一行时,问题就会出现.我无法确定需要多少px或%来定位这些线.有没有办法"动态"定位不同列表项之间的行？

我们使用的html是不可编辑的,因为它是由我们正在使用的CMS呈现的.

这就是我所拥有的:

这是我试图实现的目标

这是我目前的代码

html {
    box-sizing: border-box;
}

.Container {
    max-width: 70%;
    margin-right: auto;
    margin-left: auto;
    background: blue;
    padding-top: 20px;
    padding-bottom: 20px;
}

.Flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
}

.Flex-item {
    background: red;
    position: relative;
}

.Flex-item:after {
    content: "";
    position: absolute;
    background: white;
    width: 1px;
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
}

Run Code Online (Sandbox Code Playgroud)

<div class="Container">
    <ul class="Flex">
         <li class="Flex-item">Lorem</li>
         <li class="Flex-item">consectetur</li>
         <li class="Flex-item">vestibulum</li>
         <li …

Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

Nic*_*las

2018 06-16

18
推荐指数

3
解决办法

1万
查看次数