我嘗試用Tailwind CSS建立一個側邊欄選單。但我不能像LI-tag的文本那樣，將圖示放在同一高度。
< ul id="sidemenu" class="text-center border-b-2 border-gray-200">
<li class="border-t-2 border-gray-200">/span>
< div href="#" class="block cursor-pointer block py-3 relative">
<span class="> 標題1</span>
<svg xmlns="http://www.w3. string">"none" viewBox="0 0 24 24" stroke="currentColor">
< path stroke-lineecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7" />。
</svg>
</div>/span>
<ul class="bg-gray-50 border-t-2 border-gray-100">
<li class="py-2"/span>> 子項-1</li>
<li class="py-2"/span>> Sub-Item-2</li>。
<li class="py-2"/span>> Sub-Item-3</li>
</ul>/span>
</li>/span>
<li class="border-t-2 border-gray-200">
<span class=" block py-3 cursor-pointer"/span>> 標題2</span>
</li>/span>
<li class="border-t-2 border-gray-200">
<span class=" block py-3 cursor-pointer"/span>> 標題3</span>
</li>/span>
</ul>
下面是一個例子，它現在看起來如何。https://jsfiddle.net/j6y3sznq/
uj5u.com熱心網友回復：
類.top-1/2缺少轉換屬性，可以考慮添加transform: translateY(-50%)來將其對齊到中心。
.top-1/2{
transform: translateY（-50%）。
}更新后的fiddle here
解決方案二。尾風類名稱。只要在svg元素中添加transform -translate-y-2/4即可。
< link rel="styleheet" href="https: //cdnjs. cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css">
< ul id="sidemenu" class="text-center border-b-2 border-gray-200">
<li class="border-t-2 border-gray-200">/span>
< div href="#" class="block cursor-pointer block py-3 relative">
<span class="> 標題1</span>
<svg xmlns="http://www.w3. org/2000/svg" class="h-4 w-4 absolute right-1 top-1/2 transform -translate-y-2/4" fill="none""none" viewBox="0 0 24 24" stroke="currentColor">
< path stroke-lineecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7" />。
</svg>
</div>/span>
<ul class="bg-gray-50 border-t-2 border-gray-100">
<li class="py-2"/span>> 子項-1</li>
<li class="py-2"/span>> Sub-Item-2</li>。
<li class="py-2"/span>> Sub-Item-3</li>
</ul>/span>
</li>/span>
<li class="border-t-2 border-gray-200">
<span class=" block py-3 cursor-pointer"/span>> 標題2</span>
</li>/span>
<li class="border-t-2 border-gray-200">
<span class=" block py-3 cursor-pointer"/span>> 標題3</span>
</li>/span>
</ul>/span>更新后的fiddle here
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/333745.html
標籤：
上一篇：過渡到淡化一個元素不作業
下一篇：如何懸停包含特定資料的<td>？