css - 我的绝对定位的内部 div 正在扩展我的父 div，而不是分开

Question

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="border-b flex">
   <div class="w-1/6 flex items-center justify-center p-4 border-r text-sm">
      14 hours ago
   </div>
   <div class="w-3/5 p-4 text-sm"><span>
      Dolor aliquid ipsa qui eum in voluptatem Sit non quae illo eveniet exercitation cupiditate veniam sed id animi
      </span>
   </div>
   <div class="w-1/5 flex justify-end items-center p-4 relative">
      <button class="bg-white border rounded px-1 py-1 text-xs"><i class="fa fa-chevron-down"></i></button> 
      <div class="absolute pin-b pin-r bg-white border w-32 items-center justify-center">
         <ul class="list-reset p-2">
            <li>Delete</li>
         </ul>
      </div>
   </div>
</div>

正如您从我的代码片段中看到的那样，下拉列表扩展了父边框而不是覆盖（绝对）它们，我怎样才能得到它，所以我的下拉列表（删除）不会更改父 div，而只是像下图一样覆盖它们：

标签： csstailwind-css

Answer 1

这样做是因为您已经为每个带有 classes的border-bw-1/6子div 设置了特定宽度，w-3/5（我认为它应该是4/6...），w-1/5（...和1/6）所以没关系你里面有绝对元素，因为它的父级仍然分配了特定的宽度并且它会一直使用它。

.my-list-of-actions {
  top: calc(50% + 15px); /* basicaly it's 50% + half of button height to make it appear just below */
  left: 1rem; /* same as parent's padding */
}

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="border-b flex">
   <div class="w-1/6 flex items-center justify-center p-4 border-r text-sm">
      14 hours ago
   </div>
   <div class="w-4/6 p-4 text-sm"><span>
      Dolor aliquid ipsa qui eum in voluptatem Sit non quae illo eveniet exercitation cupiditate veniam sed id animi
      </span>
   </div>
   <div class="w-1/6 flex justify-start items-center p-4 relative">
      <button class="bg-white border rounded px-1 py-1 text-xs"><i class="fa fa-chevron-down">Button</i></button> 
      <div class="my-list-of-actions absolute bg-white border w-32">
      <!-- pin-b makes it stick to parent bottom and you don' want that.
      pin-r is also bad here, as it's supposed to be aligned to the left along with the button.
      Button is aligned vertically in the center so it's best to place the list just below -->
         <ul class="list-reset p-2">
            <li>Delete</li>
            <li>Edit</li>
            <li>Archive</li>
         </ul>
      </div>
   </div>
</div>