【发布时间】：2020-04-10 02:32:45
【问题描述】：
我正在尝试在圆圈之间画线，我有这个代码https://codepen.io/cfmorales/pen/qBEqGpr，在某种程度上它可以工作，但是当你调整页面大小时，线的高度与圆圈不匹配，我该如何制作的任何想法它反应灵敏吗？所有的魔法都在 :before
td:nth-child(2) {
vertical-align: baseline;
}
td:nth-child(1) {
display: flex;
justify-content: center;
margin-right: 28px;
width: 42px;
height: 42px;
border: 1px solid #999999;
border-radius: 100%;
text-align: center;
margin-bottom: 31%;
position: relative;
}
tr > td:first-child:before {
content: '';
position: absolute;
background: #BFBFBF;
height: 26px;
width: 1px;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
tr:last-child > td:first-child:before {
display: none;
}
span {
vertical-align: middle;
color: #999999;
font-family: "Playfair Display";
font-size: 24px;
line-height: 32px;
text-align: center;
}<table class="table_1">
<tbody>
<tr>
<td><span>1</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
<tr>
<td><span>2</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal mLorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
<tr>
<td><span>3</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
<tr>
<td><span>4</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
<tr>
<td><span>5</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
</tbody>
</table>
<p></p>【问题讨论】：
-
这些代码实际上不起作用。您能否详细介绍您要完成的工作？损坏的代码不是所需行为的一个很好的例子，因为它是......好吧......损坏了。
-
我看到的第一件事是您在 CSS 中使用了
//注释。你可以在像 Sass 这样的预处理器中使用这些 cmets，但原生 CSS 只有一种注释样式：/* comment */。//会引起问题。那条线打破了整个事情，当他们打开你的例子时，没有人能看到任何东西。进入并更改该评论样式并重新保存。 -
您只是想让线条停留在圆圈之间，接触圆圈边缘，还是穿过所有圆圈的中心？
-
抱歉，伙计们编辑了，@StephenMIrving 我只想将圆圈与线条连接起来，它必须是响应式的
-
必须是一张桌子吗？我看到的是一个带有左边框的 div 和一个 ::before 元素，里面有一个数字。