如何在下拉菜单中给子div一个不同的宽度？

Question

我需要一点帮助。子菜单的宽度与标签的宽度相同，这将导致子菜单项文本的包装。我希望子菜单项目采取的文本所需的宽度。

<div class="relative">
            <a href="#" class="sm:mt-1 sm:px-1 md:px-3 py-1 block rounded sm:hover:bg-gray-600 sm:hover:bg-opacity-50 md:hover:font-bold">Menu Items<svg class="h-4 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg></a>
            <div id="submenu" class="absolute px-2 py-2 rounded bg-gray-300 shadow-lg">
                <ul>
                    <li><a href="#">Menu Item 1</a></li>
                    <li><a href="#">Menu Item 2</a></li>
                    <li><a href="#">Menu Item 3</a></li>
                    <li><a href="#">Menu Item 4</a></li>
                </ul>
            </div>
        </div>

Answer 1

我能够用min max属性来完成它。

<div id="submenu" class="absolute min-w-max px-2 py-2 rounded bg-gray-200 shadow-lg">

Answer 2

只需将whitespace-nowrap添加到子菜单

​

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="relative inline-block ">
  <a href="#" class="sm:mt-1 sm:px-1 md:px-3 py-1 rounded sm:hover:bg-gray-600 sm:hover:bg-opacity-50 md:hover:font-bold">Menu <svg class="h-4 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg></a>
  <div id="submenu" class="absolute px-2 py-2 rounded bg-gray-300 shadow-lg whitespace-nowrap">
    <ul>
      <li><a href="#">Menu Item 1</a></li>
      <li><a href="#">Menu Item 2</a></li>
      <li><a href="#">Menu Item 3</a></li>
      <li><a href="#">Menu Item 4</a></li>
    </ul>
  </div>
</div>

​