Question

我正在使用Tailwind框架来构建Dropdown组件。

我正在尝试使用其内容扩展下拉列表的div。随着电子邮件变得越来越大，下拉列表应该越宽。如果删除下拉菜单的absolute，则孔菜单会移至其他位置。

这是我的HTML：

<html>

<head>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<body>
  <div class="relative inline-block text-left">
    <div>
      <span class="rounded-md shadow-sm">
            <button
              type="button"
              class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
            >
              Options
              <svg
                class="-mr-1 ml-2 h-5 w-5"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fill-rule="evenodd"
                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                  clip-rule="evenodd"
                />
              </svg>
            </button>
          </span>
    </div>
    <div class="origin-top-left absolute left-0 mt-2 w-auto max-w-xs rounded-md shadow-lg">
      <div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
        <div class="flex items-center px-4 py-2 text-sm text-gray-700 cursor-default rounded-t-md" role="menuitem">
          <div class="flex-shrink-0">
            <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
          </div>
          <div class="ml-2">
            <p>Tom Cook</p>
            <p class="font-bold truncate">tom@example.com</p>
          </div>
        </div>
        <div class="border-t border-gray-200"></div>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
              Your Profile
            </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
              Settings
            </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-b-md" role="menuitem">
              Sign out
            </a>
      </div>
    </div>
  </div>
</body>

</html>

谢谢。

Answer 1

我不熟悉顺风，但是通过检查它在检查器中分配的默认样式，我确定问题是由为其分配了默认f1的图像（k1标签）引起的，这会使布局计算混乱，因为它的容器没有给定的宽度。
可以通过在图像中添加kd类以禁用此规则来解决此问题：

img

Answer 2

一种方法是使用CSS属性width: max-content;，如下所示（我在相关下拉菜单中添加了一个id，以便于阅读）。

#my-drop-down .origin-top-left {
  width: max-content;
}

<html>

<head>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<body>
  <div class="relative inline-block text-left" id="my-drop-down">
    <div>
      <span class="rounded-md shadow-sm"> 
            <button
              type="button"
              class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
            >
              Options
              <svg
                class="-mr-1 ml-2 h-5 w-5"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fill-rule="evenodd"
                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                  clip-rule="evenodd"
                />
              </svg>
            </button>
          </span>
    </div>
    <div class="origin-top-left absolute left-0 mt-2 w-auto max-w-xs rounded-md shadow-lg">
      <div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
        <div class="flex items-center  px-4 py-2 text-sm text-gray-700 cursor-default rounded-t-md" role="menuitem">
          <div class="flex-shrink-0">
            <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
          </div>
          <div class="ml-2">
            <p>Tom Cook</p>
            <p class="font-bold truncate">tom@example.com</p>
          </div>
        </div>
        <div class="border-t border-gray-200"></div>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
              Your Profile
            </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
              Settings
            </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-b-md" role="menuitem">
              Sign out
            </a>
      </div>
    </div>
  </div>
</body>

</html>

用内容扩展div宽度

2 个答案: