我有一个简单的应用程序，其主体宽 500 像素并居中。 我正在尝试使用 daisyUI 抽屉，以便抽屉在主体右侧进入屏幕。 但是，抽屉从视口的远端打开，而不是紧邻屏幕。 我尝试了多种方法，但没有一个有效。 下面是代码。
<body>
<h2>My App</h2>
<div class="drawer drawer-end">
<input id="my-drawer-4" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<!-- Page content here -->
<label for="my-drawer-4" class="drawer-button btn btn-primary"
>Open drawer</label
>
</div>
<div class="drawer-side">
<label for="my-drawer-4" aria-label="close sidebar" class="drawer-overlay"
></label>
<ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
<!-- Sidebar content here -->
<li><a>Sidebar Item 1</a></li>
<li><a>Sidebar Item 2</a></li>
</ul>
</div>
</div>
</body>
:global(body) {
max-width: 500px;
margin-left: auto;
margin-right: auto;
font-family: sans-serif;
}
我能够通过利用 CSS 变量获得您正在寻找的结果。在您的 Tailwind CSS 文件中，添加以下内容：
@tailwind base;
@tailwind components;
@tailwind utilities;
/* You can change the default behavior of the scroll bar
* appearing/disappearing by changing `scrollbar-gutter`
* to "unset" or "stable".
*/
html:has(.drawer-toggle:checked) {
overflow-y: hidden;
scrollbar-gutter: unset;
}
body {
--max-width: 500px;
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
font-family: sans-serif;
}
.drawer-side {
max-width: var(--max-width);
left: 50%;
transform: translateX(-50%);
}
我尝试通过另一种方式解决这个问题，将侧抽屉更改为
position: absolute这是一个工作示例。