如何用Vuetify实现头像间的纵向Threadline连线？

Got it, let's fix that threadline alignment issue in Vuetify! The core problem here is that Vuetify's v-list-item-avatar uses a horizontal flex layout by default, which is why your avatar and threadline are sitting side-by-side instead of stacked vertically like your native CSS example.

Here's how to adjust your code to match the desired vertical threadline style:

Step 1: Update the Vuetify Template #

We'll modify the v-list-item-avatar container to use vertical flex alignment, and add spacing between the avatar and threadline using Vuetify's utility classes:

<div id="app">
 <v-app id="inspire">
 <v-card class="mx-auto mt-10" width="344" outlined >
 <v-list class="d-flex">
 <!-- Add vertical flex classes to the avatar container -->
 <v-list-item-avatar class="align-self-start d-flex flex-column align-items-center">
 <!-- Add margin-bottom to separate avatar from threadline -->
 <img src="https://i.pravatar.cc/32" alt="John" class="mb-2">
 <div class="threadline"></div>
 </v-list-item-avatar>
 <v-list-item-content >
 <div class="questrial font-weight-bold" style="font-size: 14px">Daniel Frazier <span class="font-weight-medium grey--text">17 hrs ago</span></div>
 <p> Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. </p>
 </v-list-item-content>
 </v-list>
 <div class="comment-buttons">
 <span>Reply to thread</span>
 <span>View/add details</span>
 </div>
 </v-card>
 </v-app>
</div>

Step 2: Tweak the Threadline CSS #

We'll adjust the threadline to flex-grow and fill the remaining vertical space, ensuring it extends from the avatar down to the bottom of the list item (or card):

.threadline {
 width: 2px;
 /* Replace fixed height with flex-grow to fill vertical space */
 flex-grow: 1;
 background-color: #E5E5E5;
}

What Changed & Why: #

• d-flex flex-column align-items-center: Converts the v-list-item-avatar container to a vertical flex layout, stacking the avatar and threadline on top of each other (matching your native Flexbox setup).
• mb-2: Vuetify's utility class adds a bottom margin to the avatar, creating the gap between the avatar and threadline just like your native margin-bottom: 10px.
• flex-grow: 1: Makes the threadline automatically expand to fill the remaining vertical space in the avatar container, so it stretches from the avatar down to the bottom of the list item (no need for fixed height: 100% which can cause layout issues in flex containers).

If you're adding multiple list items (for a longer thread), this setup will keep the threadlines aligned vertically and consistent across all items.

内容的提问来源于stack exchange，提问作者Kyle Corbin Hurst