顺风列表项删除一行答案

【问题标题】：tailwind list items dropping a line顺风列表项删除一行
【发布时间】：2020-06-01 21:11:00
【问题描述】：

我的应用程序中有以下 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>

这应该会产生类似的东西，

然而我得到的是，

我不明白为什么最后的列表项会像上边距一样下降？

【问题讨论】：

工作代码的链接怎么样？
使用 float: left 或 vertical-align: middle 查看以太简介
也许它与图像的大小与文本的大小有关...删除 +5 元素并查看它是否只是列表中的最后一项或可能是底层图像元素将所有图像元素推高？

标签： html css tailwind-css

【解决方案1】：

您只需将flex 和items-center 添加到您的ul 即可获得所有头像和计数圈：

<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。

【讨论】：