我正在嘗試獲取左側的文本和右側的圖示，但現在圖示位于文本上方，請參見第一張圖片。我希望圖示位于“專案名稱”右側的右上角，并且文本類似于第二張圖片。
<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!-- Body -->
<div class="flex card bg-neutral h-48 px-3 hover:bg-primary">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
<h2 class="text-2xl font-bold text-white py-3">Project name</h2>
<p class="text-left py-4 font-bold group-hover:bg-primary">Explaination of the project</p>
<p class="text-left pb-4 font-bold">Tag, tag, tag</p>
</div>
uj5u.com熱心網友回復：
div用 class將標題和圖示都包裝在 a中flex。這樣它們將被放置在同一行。
您還可以添加justify-between以將圖示移動到右上角。
Cornel Raiu 在關于添加items-center到混合中的評論中提出了一個很好的建議，即垂直對齊標題和圖示。
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="card bg-neutral h-48 px-3 hover:bg-primary">
<div class="flex justify-between">
<h2 class="text-2xl font-bold text-white py-3">Project name</h2>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</div>
<p class="text-left py-4 font-bold group-hover:bg-primary">Explaination of the project</p>
<p class="text-left pb-4 font-bold">Tag, tag, tag</p>
</div>uj5u.com熱心網友回復：
希望這可以幫助 。
<div class="flex items-center">
<svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="11" />
<path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
</svg>
<p class="ml-4">
Icons
<code class="text-sm font-bold text-gray-900">Next to Text...!</code> file
</p>
</div>
uj5u.com熱心網友回復：
您可以添加items-center與justify-between將保持圖示完全垂直對齊到標題的類。
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="card bg-neutral h-48 px-3 hover:bg-primary">
<div class="flex justify-between items-center">
<h2 class="text-2xl font-bold text-dark py-3">Project name</h2>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</div>
<p class="text-left py-4 font-bold group-hover:bg-primary">Explaination of the project</p>
<p class="text-left pb-4 font-bold">Tag, tag, tag</p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496892.html
上一篇：全域css檔案不會覆寫組件css