fix(breadcrumb): 修复图标与文字垂直不对齐问题(第4次尝试)
根本原因:SVG图标和文字的baseline不同 - items-center 按中心对齐,但SVG和文字的"中心"定义不同 - 导致视觉上图标和文字不在同一水平线 修复方案: - 使用 items-baseline 替代 items-center(按基线对齐) - 添加 leading-none 移除额外行高 - 确保所有元素使用相同的基线对齐方式
This commit is contained in:
@@ -14,16 +14,16 @@ interface BreadcrumbProps {
|
||||
|
||||
export function Breadcrumb({ items }: BreadcrumbProps) {
|
||||
return (
|
||||
<nav aria-label="breadcrumb" className="flex items-center gap-2 text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4">
|
||||
<StaticLink
|
||||
href="/"
|
||||
className="inline-flex items-center hover:text-[#C41E3A] transition-colors"
|
||||
<nav aria-label="breadcrumb" className="flex items-baseline gap-2 text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4 leading-none">
|
||||
<StaticLink
|
||||
href="/"
|
||||
className="inline-flex items-center hover:text-[#C41E3A] transition-colors"
|
||||
aria-label="返回首页"
|
||||
>
|
||||
<Home className="w-4 h-4" />
|
||||
</StaticLink>
|
||||
{items.map((item, index) => (
|
||||
<div key={index} className="flex items-center">
|
||||
<div key={index} className="flex items-baseline">
|
||||
<ChevronRight className="w-3.5 h-3.5 text-[#CCCCCC] mx-1" />
|
||||
<StaticLink
|
||||
href={item.href}
|
||||
|
||||
Reference in New Issue
Block a user