如何为 drop-down 菜单中的 child div 设置不同的宽度？

Question

我需要一点帮助。子菜单采用与 a 标签相同的宽度，这导致子菜单项文本换行。我希望子菜单项的宽度与文本需要的宽度一样多。

<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

只需将 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>

Answer 2

我可以用 min-w-max 属性.

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

如何为 drop-down 菜单中的 child div 设置不同的宽度？

How to give a different width to the child div in a drop-down menu?

css

tailwind-css