html – 在包装项行上添加水平线分隔符

概述我正在使用css flexbox将未知数量的项放入行中,如果需要,可以将其包装到其他行中. 我的问题是,是否可以在每行之间有一条水平线？ Here就是我所拥有的一个简单例子.如果打开代码板,您将看到项目包装成两行(可能多于两行;或者只有一行 – 这取决于元素的确切数量和显示的宽度).我想在行之间有一条水平线. <div> <span>First item</span> <span> 我正在使用CSS flexBox将未知数量的项放入行中,如果需要,可以将其包装到其他行中. @H_403_2@我的问题是,是否可以在每行之间有一条水平线？

@H_403_2@Here就是我所拥有的一个简单例子.如果打开代码板,您将看到项目包装成两行(可能多于两行;或者只有一行 – 这取决于元素的确切数量和显示的宽度).我想在行之间有一条水平线.

<div>    <span>First item</span>    <span>Second item</span>    <span>Third item</span>    <span>Fourth item</span>    <span>Fifth item</span>    <span>Sixth item</span></div>

@H_403_2@使用以下CSS：

div {  border: 1px solID black;  wIDth:20%;  display: flex;  flex-flow: row wrap;}span {  border: 1px solID blue;  margin: 5px;}

解决方法 有一种方法可以使用“flex-grow”属性在每行下面添加一条水平线.但是,如果你想在每个项目之间保持5px – 我不知道如何实现这一目标.如果没有,请按以下步骤 *** 作： @H_403_2@>用同一个类包装div中的每个跨度.
>为您的FlexBox容器提供唯一的类/ ID,以使其CSS不应用于包装器div.同时删除其底部边框.
>为你的包装类提供你想要的底部边框,一些填充,并设置flex-grow：1.
>为最后一个flex-item指定一个带有flex-grow：1000或其他任意大数字的ID.

@H_403_2@这是一个JFiddle的工作.

@H_403_2@这是我使用的代码：

<style>div.flexBox { border-left: 1px solID black; border-top: 1px solID black; border-right: 1px solID black; wIDth:50%; display: flex; flex-flow: row wrap; align-items: stretch;}       span { border: 1px solID blue; margin: 5px;}      .wrap { border-bottom: 1px solID black; padding: 5px; flex-grow: 1;}#last { flex-grow: 1000;}</style><div >  <div ><span>First item</span></div>  <div ><span>Second item</span></div>  <div ><span>Third item</span></div>  <div ><span>Fourth item</span></div>  <div ><span>Fifth item</span></div>  <div ><span>Sixth item</span></div>  <div ><span>Seventh item</span></div>  <div ><span>Eigth item</span></div>  <div ><span>Nineth item</span></div>  <div ><span>tenth item</span></div>  <div ID="last" ><span>Eleventh item</span></div></div>

@H_403_2@如果您不介意最后一行是均匀间隔的,那么您可以忽略有关向具有较大flex-grow数的最后一个元素添加ID的部分.

总结

以上是内存溢出为你收集整理的html – 在包装项行上添加水平线分隔符全部内容，希望文章能够帮你解决html – 在包装项行上添加水平线分隔符所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。