fix(breadcrumb): 第9次尝试 - 强制inline-flex + vertical-align:middle

新策略:不再依赖Tailwind工具类,直接用style属性强制控制
- nav: lineHeight=1 消除行高差异
- 所有元素: display:inline-flex + verticalAlign:middle
- SVG图标: display:block 防止inline布局干扰
This commit is contained in:
张翔
2026-04-23 13:25:16 +08:00
parent 89ca8ae392
commit 60d61cd5c6
+11 -5
View File
@@ -14,20 +14,26 @@ interface BreadcrumbProps {
export function Breadcrumb({ items }: BreadcrumbProps) {
return (
<nav aria-label="breadcrumb" className="flex items-center gap-1.5 text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4">
<nav
aria-label="breadcrumb"
className="flex items-center gap-1 text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4"
style={{ lineHeight: '1' }}
>
<StaticLink
href="/"
className="inline-flex hover:text-[#C41E3A] transition-colors"
className="hover:text-[#C41E3A] transition-colors align-middle"
aria-label="返回首页"
style={{ display: 'inline-flex', verticalAlign: 'middle' }}
>
<Home className="w-[14px] h-[14px]" />
<Home className="w-3.5 h-3.5" style={{ display: 'block', verticalAlign: 'middle' }} />
</StaticLink>
{items.map((item, index) => (
<span key={index} className="inline-flex items-center gap-0.5">
<ChevronRight className="w-3 h-3 text-[#CCCCCC] shrink-0" />
<span key={index} style={{ display: 'inline-flex', verticalAlign: 'middle', alignItems: 'center' }}>
<ChevronRight className="w-3 h-3 text-[#CCCCCC] shrink-0 mx-0.5" />
<StaticLink
href={item.href}
className="hover:text-[#C41E3A] transition-colors"
style={{ verticalAlign: 'middle' }}
>
{item.label}
</StaticLink>