Tailwind CSS：max-w-screen-2xl在导航栏不生效，如何修复？

我给外层容器设置了max-w-screen-2xl类，其他页面模块都能正常遵循这个最大宽度限制，但导航栏（navbar）却无视该设置，超出了限定宽度范围。相关代码及问题截图如下：

原始代码：

<div className='flex items-center justify-center max-w-screen-2xl mx-auto'>
    <div className="navbar nav-container bg-base-100 max-w-[90%] w-[90%] fixed top-3 z-50 px-8 py-6">
        <div className="navbar-start">
            <div className="dropdown">
                <label tabIndex={0} className="btn btn-ghost lg:hidden">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
                </label>
            </div>
            <button onClick={()=>navigate('/')} className="btn btn-sm btn-ghost normal-case text-xl">daisyUi</button>
        </div>
        <div className="navbar-center hidden lg:flex">
            <ul className="menu menu-horizontal p-0">
                <li><a>Item 1</a></li>
                <li><a>Item 3</a></li>
            </ul>
        </div>
        <div className="navbar-end">
            <button onClick={()=>navigate('/register')} className="btn btn-sm">Register</button>
        </div>
    </div>
</div>

问题原因 #

导航栏使用了fixed固定定位，这类元素会脱离正常文档流，不再受父容器的宽度约束。你设置的w-[90%]是基于视口宽度计算的，当视口宽度超过max-w-screen-2xl时，导航栏的实际宽度自然会超出父容器的限制。

解决方案 #

把宽度约束直接加到导航栏上，让固定定位的元素自身遵守最大宽度限制：

修改后的代码：

<div className='flex items-center justify-center'>
    <div className="navbar nav-container bg-base-100 max-w-screen-2xl w-full fixed top-3 z-50 px-8 py-6 mx-auto">
        <div className="navbar-start">
            <div className="dropdown">
                <label tabIndex={0} className="btn btn-ghost lg:hidden">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
                </label>
            </div>
            <button onClick={()=>navigate('/')} className="btn btn-sm btn-ghost normal-case text-xl">daisyUi</button>
        </div>
        <div className="navbar-center hidden lg:flex">
            <ul className="menu menu-horizontal p-0">
                <li><a>Item 1</a></li>
                <li><a>Item 3</a></li>
            </ul>
        </div>
        <div className="navbar-end">
            <button onClick={()=>navigate('/register')} className="btn btn-sm">Register</button>
        </div>
    </div>
</div>

如果想保留导航栏90%的宽度，同时不超过max-w-screen-2xl，可以把导航栏的类改成：max-w-screen-2xl w-[90%] mx-auto，这样在小屏幕下导航栏占视口90%宽度，大屏幕下最大宽度被限制在max-w-screen-2xl内。

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