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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user