在圓圈之間畫線css

Question

我正在嘗試在圓圈之間畫線，我有這個代碼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>

Answer 1

更新：

 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; background: #fff; } tr > td:first-child:before { } 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; } .cc{ position: relative; display: block; width: 100%; text-align: left; } .cc:after{ content: ''; position: absolute; background: #BFBFBF; height: 100%; width: 1px; top: 3px; left: -55px; transform: translateX(-50%); display: block; z-index: -1; overflow:hidden; } .num{ position: relative; z-index: 100; background:#fff; }

 <table class="table_1"> <tbody> <tr> <td><span class="num">1</span></td> <td><span class="cc">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 class="num">2</span></td> <td><span class="cc">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 class="num">3</span></td> <td><span class="cc">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 class="num">4</span></td> <td><span class="cc">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 class="num">5</span></td> <td><span class="">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>

Answer 2

更好的是你可以使用 SVG，檢查下面的鏈接

    <svg>
  <line
x1="50"
y1="100"
x2="500"
y2="100"
style="stroke:rgb(0, 0, 0);stroke-width:2.5"
/><svg>

Answer 3

因此，我對您的代碼進行了一些更改，並在我自己的 Codepen 中對其進行了一些修改。 您使用表格格式化標記以使線條僅到達圓的邊緣的方式是一個棘手的問題。 我所做的是給圓圈一個淺色，然后將線一直向下穿過所有圓圈，但更改了 z-index，使其隱藏在圓圈的顏色后面。 由於我將高度從100%更改為90vh我還在表格本身周圍添加了一個包裝div以防止線條繼續向下延伸到屏幕底部。 剩下要解決的唯一問題是讓線條在最后一個圓圈處停止，而不是繼續到最后一個圓圈的最后一位文本的底部。 無論如何，在我看來，它現在看起來比您原來的示例要好得多。 我仍在努力，但您可以在這里查看我到目前為止所做的工作： https : //codepen.io/stephenirving/pen/Jjobqrb

如果您需要我解釋我的任何更改，我會很樂意。

當前的 CSS 代碼在這里：

td:first-child {
    align-items: center;
    background: #add8e6;
    border-radius: 50%;
    border: 1px solid #999;
    display: flex;
    height: 42px;
    justify-content: center;
    margin-right: 28px;
    position: relative;
    text-align: center;
    width: 42px;
}

tr:not(:last-child) > td:first-child:before {
    background: #bfbfbf;
    content: "";
    height: 90vh;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    width: 1px;
    z-index: -1;
}

td:last-child {
  text-align: justify;
    vertical-align: top;
}

tr:not(:last-child) > td:last-child {
  padding-bottom: 1em;
}

span {
    color: #999;
    font: 1.5rem/1.333 "Playfair Display", sans-serif;
    text-align: center;
    vertical-align: middle;
}

.wrapper--table-list {
  margin-top: 1.5em;
  overflow: hidden;
  width: 95%;
}

Answer 4

我用 div 替換了你的桌子。

我在這里做了一些 CSS 魔法。

• 這條線只是一個邊界左。

• 圓圈是一個 ::before 偽元素。

• 每個 ::before 元素中都有一個計數器。

• 我還使用了 CSS 變量，因此更容易更新多個元素。

• 我猜你不希望最后一個元素有一行，所以我用 :not(:last-child) 來阻止這種情況發生。

 :root { --circle-size: 42px; --spacing: 28px; --text-color: #999; } .container { counter-reset: section; padding-top: var(--spacing); padding-left: var(--spacing); } .container > div { position: relative; padding: calc(2 * var(--spacing)); padding-top: 0px; color: var(--text-color); font-family: "Playfair Display"; font-size: 24px; line-height: 32px; } .container > div:not(:last-child) { border-left: 1px solid; } .container > div::before { counter-increment: section; content: counter(section); position: absolute; left: 0px; top: -4px; transform: translateX(-50%); width: var(--circle-size); height: var(--circle-size); display: flex; justify-content: center; align-items: center; border: 1px solid var(--text-color); border-radius: 50%; background-color: white; }

 <div class="container"> <div>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</div> <div>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</div> <div>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</div> <div>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</div> <div>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</div> </div>