背景与问题:
我使用 Tailwind CSS 和 Alpine.js 来创建一个简单的搜索栏,该搜索栏有一个使用
absolute
定位的下拉菜单
Codepen 链接已失效并被删除。
当我使用
relative
定位下拉菜单时,它的位置完美地符合我的要求(但拉伸了我不想要的页面的其余部分)。然而,当我将其更改为 absolute
时,虽然它不再拉伸页面,但它使下拉菜单扩展得比预期更宽。
示例:
您可以通过单击搜索栏右侧的下拉箭头来查看。您还可以在第 26 行将
absolute
更改为 relative
时看到差异
问题:
我如何使用 Tailwind.css 定位下拉列表,使其具有absolute
位置,但不会比搜索栏更宽?
absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
所以,就像
<div class="relative">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> </div>
<div>
absolute m-auto left-0 right-0
absolute inset-0 m-auto
grid
和
place-items-center
将项目放置在中间,例如
<div class="relative">
<div class="absolute bottom-0 left-0 right-0 top-0 grid place-items-center">
<!-- Add your content here -->
</div>
</div>
如果您想将项目放置在中心,您也可以使用以下类来实现
absolute left-0 right-0 grid place-items-center
<div class="relative">
<div class="absolute left-0 right-0 grid place-items-center">
<!-- Add your content here -->
</div>
</div>
我在操场上创建了一个例子
span
标签。这会导致某些浏览器出现问题。如果您发现正在使用跨度,请尝试使用
div
标签。