如何在下拉菜单中为子 div 赋予不同的宽度？答案

【问题标题】：How to give a different width to the child div in a drop-down menu?如何在下拉菜单中为子 div 赋予不同的宽度？
【发布时间】：2020-12-05 19:46:28
【问题描述】：

我需要一点帮助。子菜单与导致子菜单项文本换行的 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>

【问题讨论】：

标签： css tailwind-css

【解决方案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>

【讨论】：

【解决方案2】：

我可以通过 min-w-max 属性做到这一点。

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

【讨论】：