为什么最大宽度在顺风CSS中不起作用?

laik7k3q  于 2023-04-01  发布在  其他
关注(0)|答案(2)|浏览(166)

我将最大宽度设置为max-w-screen-2xl,但导航栏忽略了这一点,超出了最大宽度值。我为其他部分设置了max-w-screen-2xl,它们工作正常。如何解决这个问题?x1c 0d1x

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

vyu0f0g11#

在百分比数字之后,您需要确定从中计算百分比的值。在此代码'''max-w-[90%] w-[90%]'''

dpiehjr4

dpiehjr42#

你可以添加一个像这样的类w-[100%] max-w-[800px]。它会工作。代码示例见这里-https://freetailwindui.co/components/card-component-tailwind-ui-css/

相关问题