如何让Flex子元素input填满父容器宽度？（Tailwind CSS）

问题分析 #

你的input无法铺满红色背景区域，核心原因有两个：

• 包含input的父容器使用了container类，该类默认在左右添加了px-4的内边距，w-full只能让input填满容器的内容宽度（减去内边距后的区域），所以无法覆盖红色背景的左右边缘。
• input的type属性写错了，type="input"不是合法的输入框类型，应该改为type="text"。

解决方案 #

方案1：清除container的默认内边距

给带bg-red-500的父容器添加px-0类，移除默认的左右内边距，这样w-full的input就能完全铺满红色背景：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta name="csrf-token" content="{{ csrf_token() }}" />
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
        @vite('resources/css/app.css')
    </head>
    <body class="">
        <nav class="relative container bg-red-500 mx-auto p-6">
            <div class="flex items-center justify-between">
            <div class="pt-4 mx-auto">
                <p class="text-white" >
                    Morelate
                </p>
            </div>
            </div>
        </nav>

        <section class="flex h-screen">
            <!-- 添加px-0清除container默认内边距 -->
            <div class="container items-center justify-center flex flex-col mx-auto my-auto bg-red-500 px-0">
                <div class="flex flex-row w-3/4 rounded-full my-auto">
                    <div class="flex mx-auto w-1/2">
                        <img src="https://image.tmdb.org/t/p/w500/wo2hJpn04vbtmh0B9utCFdsQhxM.jpg" id="posterImage" class="h-80 rounded-lg drop-shadow-2xl" />
                    </div>
                    <div class="flex flex-col space-y-12 w-1/2 items-center">
                        <h1>Leonardo DiCaprio</h1>
                        <p>Famous Actor</p>
                    </div>
                </div>
                <!-- 修正type为text -->
                <input type="text" class="rounded-full w-full border-black border-4">
            </div>
        </section>
    </body>
</html>

方案2：移除container类（如果不需要最大宽度限制）

如果你不需要container类提供的最大宽度约束，可以直接移除它，换成w-full让父容器占满屏幕宽度：

<div class="w-full items-center justify-center flex flex-col mx-auto my-auto bg-red-500">

效果说明 #

修改后，input会完全铺满红色背景区域的宽度，同时修复了输入框类型的错误，保证浏览器正确渲染输入控件。

内容的提问来源于stack exchange，提问作者Coneill14