React + Tailwind 按钮外部箭头动态对齐问题求助

问题现状 #

我正在开发一个使用Tailwind CSS的React项目，按钮外侧设有箭头（<-），要求箭头对齐按钮右边框中心并保持固定间距。当前：

• 文本较短的按钮箭头显示正常
• 文本较长时箭头会错位，破坏设计效果

设计要求 #

箭头需位于按钮外侧，无论按钮文本长度如何，都能动态对齐到按钮右边框中心，同时保持按钮与箭头间的间距。

核心挑战 #

如何在React+Tailwind CSS中实现箭头的动态对齐，确保箭头始终与按钮右边框中心对齐，且保留设计要求的间距？

相关代码 #

import DiscoveryButton from '../DiscoveryButton/DiscoveryButton';

const RightSection = ({ responses, activeResponse, handleButtonClick }) => {
  return (
    <div className="grid grid-cols-[80%_20%] relative">
    {/* Button Grid */}
    <div className="grid grid-cols-1 items-start  space-y-4">
      {responses.map((response, index) => (
        <DiscoveryButton
          key={index}
          index={index}
          active={activeResponse === index}
          onClick={handleButtonClick}
        />
      ))}
    </div>

    {/* Navigation Arrows */}
    <div className="grid grid-cols-1 mt-2 pl-2  justify-center relative">
      {responses.map((response, index) => (
        // VERTICAL LINE HERE
        <div
          key={index}
          className="relative w-full pt-[--pt] bg-[image:linear-gradient(#000,#000),linear-gradient(#000,#000)] bg-[position:0_calc((theme(fontSize.base.1.lineHeight)*.5)-1px+var(--pt)),100%_var(--y,0%)] bg-[length:100%_2px,2px_var(--h,100%)] bg-no-repeat [--pt:theme(padding.4)] first:[--pt:0%] first:[--y:calc(theme(fontSize.base.1.lineHeight)*.5)] last:[--h:calc((theme(fontSize.base.1.lineHeight)*.5)+var(--pt))]"
        >
          {/* Poistioning of Arrow head */}
          <svg
            className="translate-y-[calc((theme(fontSize.base.1.lineHeight)-24px)*.75)]"
            width="16.8"
            height="24"
            viewBox="0 0 16.8 24"
            fill="none"
          >
            {/* ARROW HEAD HERE */}
            <path
              d="M0 12l12 12 1.4-1.4L4.2 12 13.4 3.4 10 0l-12 12z"
              fill="currentColor"
            />
          </svg>
          {index === 2 && (
            <div class="absolute left-full top-[--pt] h-[2px] bg-black w-5 mt-[11px]" />
          )}
        </div>
      ))}
    </div>
    </div>
  );
};

export default RightSection;

解决方案 #

方案一：同容器Flex对齐（最简洁）

把每个按钮和对应的箭头放在同一个flex容器中，利用Tailwind的items-center自动对齐垂直中心，gap控制间距，彻底避免错位问题：

{responses.map((response, index) => (
  <div key={index} className="flex items-center gap-2">
    <DiscoveryButton
      index={index}
      active={activeResponse === index}
      onClick={handleButtonClick}
    />
    {/* 箭头与连线容器 */}
    <div className="relative">
      <svg className="w-[16.8px] h-[24px]" viewBox="0 0 16.8 24" fill="none">
        <path d="M0 12l12 12 1.4-1.4L4.2 12 13.4 3.4 10 0l-12 12z" fill="currentColor" />
      </svg>
      {/* 垂直连线逻辑调整为基于此容器定位 */}
    </div>
  </div>
))}

此方案无需复杂计算，flex布局会自动根据按钮高度对齐箭头，适配所有文本长度。

方案二：CSS变量同步按钮高度（适配原有网格结构）

如果要保留原有双网格布局，可以通过React获取按钮高度，用CSS变量动态调整箭头位置：

1. 在DiscoveryButton组件中添加ref获取高度：

import { useRef, useEffect } from 'react';

const DiscoveryButton = ({ ...props }) => {
  const buttonRef = useRef(null);
  
  useEffect(() => {
    if (buttonRef.current) {
      buttonRef.current.style.setProperty('--button-height', `${buttonRef.current.offsetHeight}px`);
    }
  }, []);
  
  return (
    <button ref={buttonRef} className="..." {...props}>
      {/* 按钮内容 */}
    </button>
  );
};

2. 在父组件中用变量计算箭头偏移：

<svg
  className="translate-y-[calc((var(--button-height)-24px)/2)]"
  width="16.8"
  height="24"
  viewBox="0 0 16.8 24"
  fill="none"
>
  <path d="M0 12l12 12 1.4-1.4L4.2 12 13.4 3.4 10 0l-12 12z" fill="currentColor" />
</svg>

箭头会根据对应按钮的高度自动居中，适配文本长度变化。

方案三：改进原有Tailwind定位逻辑

保留原有结构的前提下，替换固定行高计算为百分比居中：

<div
  key={index}
  className="relative w-full h-full flex items-center pt-[--pt] bg-[image:linear-gradient(#000,#000),linear-gradient(#000,#000)] bg-[position:0_calc(50%-1px+var(--pt)),100%_var(--y,0%)] bg-[length:100%_2px,2px_var(--h,100%)] bg-no-repeat [--pt:theme(padding.4)] first:[--pt:0%] first:[--y:50%] last:[--h:calc(50%+var(--pt))]"
>
  <svg className="" width="16.8" height="24" viewBox="0 0 16.8 24" fill="none">
    <path d="M0 12l12 12 1.4-1.4L4.2 12 13.4 3.4 10 0l-12 12z" fill="currentColor" />
  </svg>
</div>

核心改动：给箭头容器加h-full flex items-center让箭头自动居中，把背景线的位置计算从固定行高改为50%，适配按钮高度变化。

内容的提问来源于stack exchange，提问作者Muhammad Omer Baig