Блог

Мне нужна небольшая помощь. Подменю принимает ту же ширину, что и тег 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>
 

Просто добавьте 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> 

Я смог сделать это с помощью свойства min-w-max .

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