fix(breadcrumb): 第10次修复 - 统一alignItems对齐策略
根因(通过Playwright精确测量确认):
- Home SVG top=76, 箭头 SVG top=92, 差异16px
- Home链接没有 alignItems:'center'
- 箭头容器有 alignItems:'center' → 导致SVG被居中
修复:
- 给Home链接添加 alignItems:'center', justifyContent:'center'
- 移除无效的 verticalAlign:'middle'
- 所有SVG统一使用 display:'block'
验证结果:
- Home SVG top=91, 箭头 SVG top=92, 差异1px ✅
This commit is contained in:
@@ -21,19 +21,18 @@ export function Breadcrumb({ items }: BreadcrumbProps) {
|
|||||||
>
|
>
|
||||||
<StaticLink
|
<StaticLink
|
||||||
href="/"
|
href="/"
|
||||||
className="hover:text-[#C41E3A] transition-colors align-middle"
|
className="hover:text-[#C41E3A] transition-colors"
|
||||||
aria-label="返回首页"
|
aria-label="返回首页"
|
||||||
style={{ display: 'inline-flex', verticalAlign: 'middle' }}
|
style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
|
||||||
>
|
>
|
||||||
<Home className="w-3.5 h-3.5" style={{ display: 'block', verticalAlign: 'middle' }} />
|
<Home className="w-3.5 h-3.5" style={{ display: 'block' }} />
|
||||||
</StaticLink>
|
</StaticLink>
|
||||||
{items.map((item, index) => (
|
{items.map((item, index) => (
|
||||||
<span key={index} style={{ display: 'inline-flex', verticalAlign: 'middle', alignItems: 'center' }}>
|
<span key={index} style={{ display: 'inline-flex', alignItems: 'center' }}>
|
||||||
<ChevronRight className="w-3 h-3 text-[#CCCCCC] shrink-0 mx-0.5" />
|
<ChevronRight className="w-3 h-3 text-[#CCCCCC] shrink-0 mx-0.5" style={{ display: 'block' }} />
|
||||||
<StaticLink
|
<StaticLink
|
||||||
href={item.href}
|
href={item.href}
|
||||||
className="hover:text-[#C41E3A] transition-colors"
|
className="hover:text-[#C41E3A] transition-colors"
|
||||||
style={{ verticalAlign: 'middle' }}
|
|
||||||
>
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
</StaticLink>
|
</StaticLink>
|
||||||
|
|||||||
Reference in New Issue
Block a user