用内容扩展 div 宽度

Question

我正在使用 Tailwind 框架构建下拉组件。

我正在尝试用下拉菜单的内容扩展 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

一种方法是使用 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>

Answer 2

我不熟悉 tailwind，但通过检查它在检查器中分配的默认样式，我确定问题是由分配了默认 max-width: 100% 的图像（img 标签）引起的对他们来说，这使得布局计算在这种情况下变得混乱，因为它的容器没有给定的宽度。
这可以通过在图像中添加 max-w-none class 来禁用此规则来解决，如下所示：

<div class="flex-shrink-0">
    <img class="h-10 w-10 rounded-full max-w-none" 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 宽度

Expand div width with content

html

css

tailwind-css