Html Tailwindcss 和 Flexbox 的意外行为

发布于03月09日

我试着把一个问题孤立几个小时，但没有成功.我认为一张图片比几句话更有价值，所以让我们从这个开始.

还有密码.

<section id="about-me" class="flex bg-neutral-300 text-neutral-900">
    <div class="container mx-auto flex flex-col space-y-5 md:flex-row md:space-x-5 p-5 md:p-0 md:pt-5 md:pb-5">
        <div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
            <div class="flex flex-col">
                <p>test</p>
            </div>
        </div>
        <div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
            <div class="flex flex-col">
                <p>test</p>
            </div>
        </div>
        <div class="flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900">
            <div class="flex flex-col">
                <p>test</p>
            </div>
        </div>
    </div>
</section>

正如我们所见，容器中的第一个div有一个奇怪的位置.我try 过删除很多类，包括padding和margin，但第一个元素无论如何都保持在这个位置.

我真的不明白我的问题是什么，所以我现在需要额外的一双眼睛.谢谢

Html Tailwindcss 和 Flexbox 的意外行为

推荐答案

Html相关问答推荐

如何将数据发送到Flask 应用程序中的表单文本框

R中的动态Webscraping

未显示新组件的视图

窗口视图之外的下拉菜单位置

图像不在HTML文件中显示

摆动的html标签

滚动平滑在笔记本电脑上不起作用，但在Nextjs网站的手机浏览器中起作用

将导航项目底部边框与导航栏对齐

一切停止工作后，添加不透明度(在tailwind )

文本css后面未显示背景 colored颜色

与窗高匹配的响应式正方形网格

如何在css中在span中绘制圆弧？

如何在ASP.NET Core中添加换行符

如何将tmap按钮和图例更改为位于页脚后面？

如何使活动选项卡背景作为父背景图像

带有数据 URI 的音频在 Chrome 中失败

具有 css 高度的输入元素：100% 溢出父 div

把标题、段落和图片放在一起

svg 内容超过元素

为什么浏览器在 Select 一个包裹在  标签中的块级元素后包含相邻元素？