我正在使用 vue （html 語法）為評論鏈創建 div，基本上是存在多個評論的地方，以及一種將它們全部鏈接在自己的容器中的風格。我目前有一個漂亮的小布局，在每個評論的左側創建了一個描邊圓圈，這是一個很好的步驟，但我想做的是找到一種方法來創建在圓圈之間垂直運行的實線或虛線工件來完成將它們鏈接在一起的想法。這是我所擁有的和一個小涂鴉來代表我想要的：下面發布我的代碼。實現這一目標的好方法是什么（假設我不擔心移動響應能力，因為我可能會在移動設備上完全取消該鏈）？<div  class="commentsChainContainer"><div  class="commentsChain" style="display:flex; flex:1; flex-direction:row; align-items: center; align-content: center; margin-bottom:45px;">  <div class="commentArtifact"></div>  <div class="singleComment" style="padding-left:20px;">    <div class="commentAuthorBox" style="display: flex; flex:1; flex-direction: row; align-items: center; align-content: center;">      <p class="commentAuthor firstLastNames" style="font-size:20px;">Comment by John Doe</p>    </div>    <div class="commentTextBox" style="margin-top:20px;">      <p class="commentText">Here's a comment</p>    </div>  </div></div><hr><div  class="commentsChain" style="display:flex; flex:1; flex-direction:row; align-items: center; align-content: center; margin-bottom:45px;">  <div class="commentArtifact"></div>  <div class="singleComment" style="padding-left:20px;">    <div class="commentAuthorBox" style="display: flex; flex:1; flex-direction: row; align-items: center; align-content: center;">      <p class="commentAuthor firstLastNames" style="font-size:20px;">Comment by John Doe</p>    </div>    <div class="commentTextBox" style="margin-top:20px;">      <p class="commentText">Here's a comment</p>    </div>  </div></div><hr></div><style type="text/css">  .commentArtifact{  background-color:#fff;    border:1px solid #cccccc;        height:30px;    border-radius:50%;    -moz-border-radius:50%;    -webkit-border-radius:50%;    width:30px;}</style>