本文介绍了如何在网格显示中为每行添加支撑线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个元素，它显示一组任意的图标，就像字符串上的珠子一样。到目前为止，我已经用网格显示了图标的排列，如下所示(出于演示目的，将图标替换为正方形)： 数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
body {
width: 90%;
max-width: 300px;
margin: 2em auto;
font: .9em/1.2 Arial, Helvetica, sans-serif;
}
.container > div {
border-radius: 5px;
background-color: rgb(36,33,33);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30px, auto));
gap: 20px;
grid-auto-rows: minmax(30px, auto);
} <h1>Simple grid example</h1>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>但我不知道如何在每一行上为图标创建一条线。参考图片：
灰色线条应该在黑色方块后面。想法：
将div动态添加到看起来像行的
container，然后设置它们的grid-row和grid-col属性以与块重叠。不是只将黑色正方形作为
container的元素，而是使用包含一个黑色正方形和一个水平线段的div，以便每个黑色正方形都带有一小段线。然后检测每行的边框，并移动线条或其宽度的一半，使其不显示在边上。
这两个解决方案似乎都很复杂，所以在我进入兔子洞之前，我想问一下是否有更简单的方法，即使是不需要JS的方法。
推荐答案
我认为使用pseudo-elements会更好，因为不需要向DOM添加额外的元素。
- 为所有单元格创建具有所需属性的
pseudo-element。 - 向左移动
pseudo-element。 - 添加最后添加
overflow: hidden;到.container为隐藏 不必要的pseudo-elements。
.container div::after {
content: '';
width: calc(var(--cell) + var(--column-gap)); /* 30px + 20px */
height: var(--line-height); /* 3px */
position: absolute;
top: 50%;
left: -50%;
background-color: gray;
transform: translate(-50%, -50%);
z-index: -1;
}
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--cell: 30px;
--column-gap: 20px;
--line-height: 3px;
}
body {
width: 90%;
/* max-width: 300px; */
margin: 2em auto;
font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}
.container {
display: flex;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--cell), auto));
gap: var(--column-gap);
grid-auto-rows: minmax(var(--cell), auto);
overflow: hidden; /* hide left side */
}
.container>div {
position: relative;
border-radius: 5px;
background-color: rgb(36, 33, 33);
}
.container div::after {
content: '';
width: calc(var(--cell) + var(--column-gap)); /* 30px + 20px */
height: var(--line-height); /* 3px */
position: absolute;
top: 50%;
left: -50%;
background-color: gray;
transform: translate(-50%, -50%);
z-index: -1;
}<h1>Simple grid example</h1>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>这篇关于如何在网格显示中为每行添加支撑线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！