顺风列表项删除一行

Question

我的应用程序中有以下HTML，

<div class="col-span-1 h-40 border-gray-400 border bg-white">
                    <div class="border-b border-gray-400 py-6 pl-4">
                        <h3 class="text-xl font-brand font-bold text-gray-800 text-l">Your Teams</h3>
                    </div>
                    <div class="w-full border-b border-gray-400 flex p-5 last:border-b-0 items-center">
                        <p class="text-gray-800 text-xl">Team 1</p>
                        <ul class="ml-auto">
                            <li class="border-2 border-blue-400 rounded-full inline-block">
                                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                                    <img src="../assets/avatar.png" class="rounded-full"/>
                                </router-link>
                            </li>
                            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                                    <img src="../assets/avatar.png" class="rounded-full"/>
                                </router-link>
                            </li>
                            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                                    <img src="../assets/avatar.png" class="rounded-full"/>
                                </router-link>
                            </li>
                            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                                    <img src="../assets/avatar.png" class="rounded-full"/>
                                </router-link>
                            </li>
                            <li class="border-blue-400 bg-blue-400 rounded-full inline-block -ml-3">
                                <router-link to="" class="text-m rounded-full h-8 w-8 flex items-center justify-center overflow-hidden text-white">
                                    +5
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </div>

这应该会产生类似这样的结果，

​

​

但是我得到的是，

​

​

我不明白为什么最后的列表项下降了，好像它有一个上边距？

Answer 1

只需在ul中添加一个flex和items-center，就可以将所有头像和计数圈排成一条线

<div class="col-span-1 h-40 border-gray-400 border bg-white">
    <div class="border-b border-gray-400 py-6 pl-4">
        <h3 class="text-xl font-brand font-bold text-gray-800 text-l">Your Teams</h3>
    </div>
    <div class="w-full border-b border-gray-400 flex p-5 last:border-b-0 items-center">
        <p class="text-gray-800 text-xl">Team 1</p>
        <ul class="ml-auto flex items-center">
            <li class="border-2 border-blue-400 rounded-full inline-block">
                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                    <img src="https://i.pravatar.cc/50" class="rounded-full"/>
                </router-link>
            </li>
            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                    <img src="https://i.pravatar.cc/50" class="rounded-full"/>
                </router-link>
            </li>
            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                    <img src="https://i.pravatar.cc/50" class="rounded-full"/>
                </router-link>
            </li>
            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                    <img src="https://i.pravatar.cc/50" class="rounded-full"/>
                </router-link>
            </li>
            <li class="border-blue-400 bg-blue-400 rounded-full inline-block -ml-3">
                <router-link to="" class="text-m rounded-full h-8 w-8 flex items-center justify-center overflow-hidden text-white">
                    +5
                </router-link>
            </li>
        </ul>
    </div>
</div>

这是一个live demo。