背景和。問題:

我使用Tailwind CSS和Alpine.js創(chuàng)建了一個簡單的搜索欄，它有一個使用absolute定位的下拉列表

這里是代碼筆:https://codepen.io/jdonline/pen/YzXpbyJ

當(dāng)我使用relative定位下拉菜單時，它的位置完全符合我的要求(但是拉伸了頁面中我不想要的部分)。然而，當(dāng)我將它改為absolute時，雖然它不再拉伸頁面，但它擴(kuò)展下拉列表的寬度超出了預(yù)期。

示例:

單擊搜索欄右側(cè)的下拉箭頭可以看到這一點(diǎn)。您還可以在第26行看到將絕對改為相對的區(qū)別

問題:

如何使用Tailwind.css定位下拉列表，使其具有絕對位置，但不超出搜索欄？

# # #僅使用順風(fēng)，您可以使用以下類

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>

# # #對于順風(fēng)，試試這個:

absolute m-auto left-0 right-0

# # #答案很簡單，position:absolute應(yīng)該有一個帶position:relative的父div，在你的情況下relative是for body我覺得，你需要給relative到父div也就是n行號25，

也可以參考職位CSS

<div x-show.transition.opacity.duration.700ms="open" class="relative" >
    <div class="absolute inset-x-0 shadow-xl bg-white w-3/4 md:w-2/5 mx-auto -mt-1 rounded-lg rounded-t-none">

# # #我在順風(fēng)Github個人資料上的這個提議中找到了我的答案。 https://github . com/tailwindlabs/tailwindcss/discussions/1531

添加這個實(shí)用程序類可以很好地工作:

.inset-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

# # #您也可以使用網(wǎng)格和放置-項(xiàng)目-中心將項(xiàng)目放置在中間，例如

<div class="relative">
  <div class="absolute bottom-0 left-0 right-0 top-0 grid place-items-center">
   <!-- Add your content here -->
  </div>
</div>