CSS：如何使用在線標簽繪制垂直線

Question

我在 CSS 有一個作業。 我的工作是畫一條公共汽車的路線。

這是我的 html：

<div class="city-group">
  <div class="city-name-wrapper">
    <div class="city-name-line">
      <div class="city-name">City 1</div>
    </div>
  </div>

  <div class="stop-list">
    <div class="stop">Stop 1</div>
    <div class="stop">Stop 2</div>
    <div class="stop">Stop 3</div>
    <div class="stop">Stop 4</div>
    <div class="stop">Stop 5</div>
  </div>
</div>

<div class="city-group">
 <div class="city-name-wrapper">
    <div class="city-name-line">
      <div class="city-name">City 2</div>
    </div>
  </div>

  <div class="stop-list">
    <div class="stop">Stop 6</div>
    <div class="stop">Stop 7</div>
    <div class="stop">Stop 8</div>
  </div>
</div>

我必須像下面的圖片一樣設置它的樣式：

• 站點按城市分組。
• 每個組的左側都有一個垂直括號。
• 帶有城市名稱的旋轉 label 在支架線上。

我試過這個 css，但我現在不知道如何讓它工作......

這是 JsFiddle 的鏈接： https://jsfiddle.net/edm6qrt2/

我喜歡使用現代 CSS，包括 flex 或 grid。 我只需要 Google Chrome 的支持。

求任何幫助！

Answer 1

一種方法是使用偽元素創建跨越城市組高度的最左側垂直線。

此外，您可以通過 CSS 變換沿該垂直線對齊city-name ，如下面的代碼片段所述：

 .city-group { position:relative; /* Create space to left of city group to accomodate the city name and lines */ padding-left:2rem; } /* Define pseudo element for vertical black line to the left, spanning the vertical axis of the city group */.city-group:before { content:""; display:block; border-left:1px solid black; left:.75rem; top:1rem; bottom:1rem; position:absolute; } /* Transform the city name with translation and rotation to place in line with line spanning left of city group */.city-name { transform: translate(-50%, 0%) rotate(-90deg) translateY(50%); position: absolute; left: 0; top: 50%; margin-top:-0.5em; border:2px solid orange; background:white; padding:0 1rem; z-index:1; } /* Create spacing above/below each stop */.stop { padding:0.5rem 0; position:realtive; } /* Style pseudo elements for first and last stop which are the horizontal line segments for these stops. These line segments connect with the vertical line defined above */.stop:first-child:before, .stop:last-child:before { content:""; display:block; border-top:1px solid black; left:.75rem; width:0.75rem; position:absolute; } /* Offset first line segement from top of city group */.stop:first-child:before { top:1rem; } /* Offset last line segement from bottom of city group */.stop:last-child:before { bottom:1rem; }

 <div class="city-group"> <div class="city-name"> City 1 </div> <div class="stop-list"> <div class="stop">Stop 1</div> <div class="stop">Stop 2</div> <div class="stop">Stop 3</div> <div class="stop">Stop 4</div> <div class="stop">Stop 5</div> </div> </div> <div class="city-group"> <div class="city-name"> Long City 2 </div> <div class="stop-list"> <div class="stop">Stop 6</div> <div class="stop">Stop 7</div> <div class="stop">Stop 8</div> <div class="stop">Stop 9</div> <div class="stop">Stop 10</div> </div> </div>