我将最大宽度设置为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>
2条答案
按热度按时间vyu0f0g11#
在百分比数字之后,您需要确定从中计算百分比的值。在此代码'''max-w-[90%] w-[90%]'''
dpiehjr42#
你可以添加一个像这样的类
w-[100%] max-w-[800px]
。它会工作。代码示例见这里-https://freetailwindui.co/components/card-component-tailwind-ui-css/