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

发布时间：2020-12-14 16:45:38 所属栏目：资源来源：网络整理

导读：我正在使用css flexbox将未知数量的项放入行中,如果需要,可以将其包装到其他行中. 我的问题是,是否可以在每行之间有一条水平线？ Here就是我所拥有的一个简单例子.如果打开代码板,您将看到项目包装成两行(可能多于两行;或者只有一行 – 这取决于元素的确切数

我正在使用css flexbox将未知数量的项放入行中,如果需要,可以将其包装到其他行中.

我的问题是,是否可以在每行之间有一条水平线？

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>

使用以下CSS：

div {
  border: 1px solid black;
  width:20%;
  display: flex;
  flex-flow: row wrap;
}

span {
  border: 1px solid blue;
  margin: 5px;
}

解决方法

有一种方法可以使用“flex-grow”属性在每行下面添加一条水平线.但是,如果你想在每个项目之间保持5px – 我不知道如何实现这一目标.如果没有,请按以下步骤操作：

>用同一个类包装div中的每个跨度.
>为您的Flexbox容器提供唯一的类/ ID,以使其CSS不应用于包装器div.同时删除其底部边框.
>为你的包装类提供你想要的底部边框,一些填充,并设置flex-grow：1.
>为最后一个flex-item指定一个带有flex-grow：1000或其他任意大数字的id.

这是一个JFiddle的工作.

这是我使用的代码：

<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 class="flexbox">
  <div class="wrap"><span>First item</span></div>
  <div class="wrap"><span>Second item</span></div>
  <div class="wrap"><span>Third item</span></div>
  <div class="wrap"><span>Fourth item</span></div>
  <div class="wrap"><span>Fifth item</span></div>
  <div class="wrap"><span>Sixth item</span></div>
  <div class="wrap"><span>Seventh item</span></div>
  <div class="wrap"><span>Eigth item</span></div>
  <div class="wrap"><span>Nineth item</span></div>
  <div class="wrap"><span>tenth item</span></div>
  <div id="last" class="wrap"><span>Eleventh item</span></div>
</div>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!