html 在等间距分布的Flex项目之间添加分隔线

8wigbo56  于 2023-06-20  发布在  其他
关注(0)|答案(7)|浏览(332)

我有一个不同的项目，其中有自动宽度（没有固定的宽度可以在我的情况下）的列表。我使用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%);
}
<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 class="Flex-item">nec</li>
         <li class="Flex-item">condimentum</li>
    </ul>
</div>
Html

7条答案

按热度按时间
0qx6xfy6

0qx6xfy61#

我正在一个项目中使用这个解决方案。
它在flex容器上设置justify-content: space-between;，在子容器上设置flex: 1 1 auto;，并在所有子容器上（第一个除外）设置左边框。
我修改了你的示例CSS，所以你可以看看。我不确定你是否会在孩子们身上使用背景颜色，所以我只是使用了行高来获得更大的边框。

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 {
    flex: 1 1 auto;
    background: red;
    position: relative;
    text-align: center;
    line-height: 40px;
}

.Flex-item + .Flex-item {
    border-left: solid 1px white;
}

/** Optional for OPs exact layout */

.Flex-item:first-child {
    text-align: left;
}

.Flex-item:last-child {
    text-align: right;
}
<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 class="Flex-item">nec</li>
        <li class="Flex-item">condimentum</li>
    </ul>
</div>

不修改HTML。

赞(0）分享  回复(0）举报  2023-06-20
pbossiut

pbossiut2#

你可以通过使用一个 nestedflexbox es * 使它工作 -我知道你不能改变标记，但至少你必须像我这里一样将li的内容 Package 成span：
1.使.flex-item也成为flexbox，文本在span中（现在将具有红色背景）， 分隔符 * 作为:after元素
1.对于Flex-item，将flex-grow和flex-shrink应用于1，将flex-basis应用于auto。

  1. flex: 0到最后一个Flex-item和margin-auto到:after也有助于这种效果。
    一个演示可能会更好地解释它-见下文：
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;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}
.Flex-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1 1 auto;
}
.Flex-item span {
  background: red;
}
.Flex-item:not(:last-child):after {
  content: "";
  border: 1px solid white;
  height: 40px;
  margin: auto;
}
.Flex-item:last-child {
  flex: 0;
}
<div class="Container">
  <ul class="Flex">
    <li class="Flex-item">
      <span>Lorem</span>
    </li>
    <li class="Flex-item">
      <span>consectetur</span>
    </li>
    <li class="Flex-item">
      <span>vestibulum</span>
    </li>
    <li class="Flex-item">
      <span>nec</span>
    </li>
    <li class="Flex-item">
      <span>condimentum</span>
    </li>
  </ul>
</div>
赞(0）分享  回复(0）举报  2023-06-20
lawou6xi

lawou6xi3#

使用风格化的ARIA代表性LI而不是:after

<li class="separator" aria-hidden="true" role="presentation"></li>

例如：

.Container {
  max-width: 70%;
  margin: 0 auto;
  background: blue;
}

.Flex {
  display: flex;
  justify-content: space-between;
  list-style: none; padding: 20px 0; margin:0;
}

.Flex-item {
  background: red;
}

.separator {
  background: white; width: 1px;
}
<div class="Container">
  <ul class="Flex">
    <li class="Flex-item">Lorem</li>
    <li class="separator" aria-hidden="true" role="presentation"></li>
    <li class="Flex-item">consectetur</li>
    <li class="separator" aria-hidden="true" role="presentation"></li>
    <li class="Flex-item">vestibulum</li>
    <li class="separator" aria-hidden="true" role="presentation"></li>
    <li class="Flex-item">nec</li>
    <li class="separator" aria-hidden="true" role="presentation"></li>
    <li class="Flex-item">condimentum</li>
  </ul>
</div>

P.S：是的，我尝试使用display: list-item最初对:after伪但naah.

赞(0）分享  回复(0）举报  2023-06-20
sczxawaw

sczxawaw4#

我认为使用flexbox实现这一点的唯一方法是将文本 Package 在一个新元素中，就像@Kukkuz在another answer中所做的那样。
如果没有额外的 Package 器，您仍然可以获得等间距的分隔符，但红色背景并不局限于文本的长度。
下面是一个示例：

  • HTML没有变化。
  • 不需要伪元素。
  • 不需要绝对定位。

如果文本的背景颜色不是必需的，那么删除它，这应该是所有你需要的。

.Flex {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.Flex-item {
  flex: 1 1 auto;
  background: red;
}
.Flex-item {
  text-align: center;
}
.Flex-item:first-child {
  text-align: left;
}
.Flex-item:last-child {
  text-align: right;
}
.Flex-item + .Flex-item {
  border-left: 1px solid white;
}
.Container {
  max-width: 70%;
  margin-right: auto;
  margin-left: auto;
  background: blue;
  padding-top: 20px;
  padding-bottom: 20px;
}
<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 class="Flex-item">nec</li>
    <li class="Flex-item">condimentum</li>
  </ul>
</div>

如果你可以在文本周围添加一个span，这将允许你将红色背景限制在文本的长度上，那么你就万事俱备了：

.Flex {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.Flex-item {
  flex: 1 1 auto;
  display: inline-flex;
  justify-content: center;
}
.Flex-item span {
    background-color: red;
}
.Flex-item:first-child span {
  margin-right: auto;
}
.Flex-item:last-child span {
  margin-left: auto;
}
.Flex-item + .Flex-item {
  border-left: 1px solid white;
}
.Container {
  max-width: 70%;
  margin-right: auto;
  margin-left: auto;
  background: blue;
  padding-top: 20px;
  padding-bottom: 20px;
}
<div class="Container">
  <ul class="Flex">
    <li class="Flex-item"><span>Lorem</span></li>
    <li class="Flex-item"><span>consectetur</span></li>
    <li class="Flex-item"><span>vestibulum</span></li>
    <li class="Flex-item"><span>nec</span></li>
    <li class="Flex-item"><span>condimentum</span></li>
  </ul>
</div>
赞(0）分享  回复(0）举报  2023-06-20
mwngjboj

mwngjboj5#

如果您对flex进行叠瓦式编写，那么您可能会得到与您尝试做内容非常接近的结果，而无需任何额外的标记。
它涉及pseudos，order和css3选择器（flex除外）。
http://codepen.io/gc-nomade/pen/BpzYWP

body {
  margin:0;
}

.Flex, .Flex-item {
  display:flex;
  padding:0.5em 0;
  margin:0;
}
.Flex-item  {
  flex:1;/*spray them evenly*/
  
}
.Flex-item:before,
.Flex-item:after {/* add pseudos to fill extra space */
  content:'';
  flex:1;/* thats where it takes room not use by the text */
  margin:-1em 0;/* grow them taller */
  border-right:solid 1px white;
}
.Flex-item:first-child:before
{
  order:2;/* put both pseudo after text*/ 
  flex:.5;/* shrink that one can be .75 to .25 */
  border:none; /* remove the border useless for the show */
}

.Flex-item:last-child:after {
  order:-1;/* put both pseudos before text */
  flex:0.5;/* shrink that one can be .75 to .25 */
}
.Flex-item:first-child + .Flex-item:before ,
.Flex-item:nth-last-child(1):after{
  border:none; /* remove the border useless for the show */
}
body, :after, :before {
  background:tomato;/* pseudo will hide li background */
}
li {
  background:turquoise;
}

/* give some space around the text */
.Flex-item:first-child {
  padding-left:1em;
}
.Flex-item:last-child {
  padding-right:1em;
}
.Flex-item:before {
  border:none;/* we do not need those after all */
  margin-right:1em;
}
.Flex-item:after {
  margin-left:1em;
}
.Flex-item:first-child:before {
  margin:-1em 0;
}.Flex-item:last-child:after {
  margin:-1em 0;
}
<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 class="Flex-item">nec</li>
         <li class="Flex-item">condimentum</li>      
    </ul>
</div>
赞(0）分享  回复(0）举报  2023-06-20
e37o9pze

e37o9pze6#

试试这个

html {
    box-sizing: border-box;
}

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

.Flex {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    float: left;
}

.Flex-item {
    position: relative;
    float: left;
    padding: 5px 10px;
    border-right:1px solid #fff;
}
.Flex-item:last-child{border-right:none;}

.Flex-item >div{
  margin:0 5px;
  background:red;
  padding:5px;
}
<div class="Container">
    <ul class="Flex">
         <li class="Flex-item"><div>
         Lorem
         </div></li>
         <li class="Flex-item"><div>
         consectetur
         </div></li>
         <li class="Flex-item"><div>
         vestibulum
         </div></li>
         <li class="Flex-item"><div>
         nec
         </div></li>
         <li class="Flex-item"><div>
         condimentum
         </div></li>
    </ul>
</div>
赞(0）分享  回复(0）举报  2023-06-20
eoigrqb6

eoigrqb67#

您可以使用此解决方案：

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

.Flex {
  display: flex;
  justify-content: space-between;

  list-style: none;
  margin: 0;
  padding: 0;
}

.Flex-item {
  /* here's part of the trick (content-box) */
  background: red content-box;
}

/* here's part of the trick */
.Flex-item + .Flex-item {
  border-left: 1px solid white;
  margin-left: 1rem;
  padding-left: 1rem;
}
<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 class="Flex-item">nec</li>
         <li class="Flex-item">condimentum</li>
    </ul>
</div>
赞(0）分享  回复(0）举报  2023-06-20
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com