如何在一行中對齊圓圈？

Question

我正在嘗試使用 Tailwind Grid 系統添加圓圈。 對於 5 選項，它工作正常，但如果我再添加 1 個圓圈，樣式就會崩潰。 我想在起始名稱上添加一個新的 Circle 作為 None。 我該如何修復樣式？

這是 Output： https://play.tailwindcss.com/sgDu7UoViA

應該是這樣的：

代碼：

 .svg { fill: currentColor; height: auto; max-width: 66vmin; transform-origin: center; width: 135px; }

 <div class="bg-gray-200 p-4 mt-2 text-black items-center flex grid grid-cols-5 gap-x-4 gap-y-8 sm:grid-cols-5 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8" style="background-color: rgba(255,255,255,.08);"> <div class="relative h-full flex justify-center items-center"> <span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5 "> None </span> <label class="rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500"> <span aria-hidden="true" class="mt-6 cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9"> <img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full" alt=""> </span> <input type="radio" name="botanicals" data-id="botanicals" class="sr-only"> </label> </div> <div class="relative h-full flex justify-center items-center"> <span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5 "> Rosehip Oil </span> <label data-id="Rosehip Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500"> <svg class="svg absolute rosehip_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" > <defs> <path id="circle" d=" M 50, 50 m -37, 0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0"/> </defs> <text font-size="11" style="transform: rotate(-55deg); transform-origin: center;"> <textPath xlink:href="#circle" class="text-black versailles"> Recommendation based on your skin goals </textPath> </text> </svg> <span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9"> <img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full" alt=""> </span> <input type="radio" name="default_oil" data-title="Argan Oil" data-id="default_oil" value="Argan Oil_10" class="sr-only"> </label> <div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Rosehip Oil"> <div class="flex justify-center"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> </div> <span class="absolute text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span> </div> <div class="relative h-full flex justify-center items-center"> <span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Marula Oil </span> <label data-id="Marula Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500"> <svg class="svg absolute hidden hidden marula_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" > <defs> <path id="circle" d=" M 50, 50 m -37, 0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0"/> </defs> <text font-size="11" style="transform: rotate(-55deg); transform-origin: center;"> <textPath xlink:href="#circle" class="text-black versailles"> Recommendation based on your skin goals </textPath> </text> </svg> <span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9"> <img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full"> </span> <input type="radio" name="default_oil" data-title="Marula Oil" data-id="default_oil" value="Marula Oil_10" class="sr-only"> </label> <div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Marula Oil"> <div class="flex justify-center"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> </div> <span class="absolute text-xs sm:text-sm font-medium text-black bottom-0"> Smooth </span> </div> <div class="relative h-full flex justify-center items-center"> <span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Argan Oil </span> <label data-id="Argan Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500"> <svg class="svg absolute hidden argan_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" > <defs> <path id="circle" d=" M 50, 50 m -37, 0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0"/> </defs> <text font-size="11" style="transform: rotate(-55deg); transform-origin: center;"> <textPath xlink:href="#circle" class="text-black versailles"> Recommendation based on your skin goals </textPath> </text> </svg> <span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9"> <img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full"> </span> <input type="radio" name="default_oil" data-title="Argan Oil" data-id="default_oil" value="Argan Oil_10" class="sr-only"> <div class="oil_label_checked_icon absolute inset-x-0 top-0 transform translate-y-px hidden"> <div class="flex justify-center transform -translate-y-1/2"> <svg class=" h-6 w-6 text-green-600 ml-10 mt-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> </div> </div> </label> <div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Argan Oil"> <div class="flex justify-center"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> </div> <span class="absolute text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span> </div> <div class="relative h-full flex justify-center items-center"> <span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Jajoba Oil </span> <label data-id="Jajoba Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500"> <svg class="svg absolute Jajoba_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" > <defs> <path id="circle" d=" M 50, 50 m -37, 0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0"/> </defs> <text font-size="11" style="transform: rotate(-55deg); transform-origin: center;"> <textPath xlink:href="#circle" class="text-black versailles"> Recommendation based on your skin goals </textPath> </text> </svg> <span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9"> <img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full"> </span> <input type="radio" name="default_oil" data-title="Jajoba Oil" data-id="default_oil" value="Jajoba Oil_10" class="sr-only"> <div class="oil_label_checked_icon absolute inset-x-0 top-0 transform translate-y-px hidden"> <div class="flex justify-center transform -translate-y-1/2"> <svg class=" h-6 w-6 text-green-600 ml-10 mt-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> </div> </div> </label> <div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Jajoba Oil"> <div class="flex justify-center"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> </div> <span class="absolute text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span> </div> <div class="relative h-full flex justify-center items-center"> <span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Almond Oil </span> <label data-id="Almond Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500"> <svg class="svg absolute Almond_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" > <defs> <path id="circle" d=" M 50, 50 m -37, 0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0"/> </defs> <text font-size="11" style=" transform: rotate(-55deg); transform-origin: center;"> <textPath xlink:href="#circle" class="text-black versailles "> Recommendation based on your skin goals </textPath> </text> </svg> <span aria-hidden="true" class="mt-16 oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9"> <img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full"> </span> <input type="radio" name="default_oil" data-title="Almond Oil" data-id="default_oil" value="Almond Oil_10" class="sr-only"> <div class="info_icon oil_info_icon z-9" data-id="Almond Oil"> <div class="flex justify-center transform -translate-y-4 "> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black mt-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> </div> <span class=" text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span> </label> </div> </div>

Answer 1

將您的代碼更改為此。 然后讓我知道。

 @media (max-width: 639px) {.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

 <div class="bg-gray-200 p-4 mt-2 text-black items-center grid grid-cols-6 gap-x-4 gap-y-8 sm:grid-cols-6 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8" style="background-color: rgba(255,255,255,.08);">