尝试在圆形 div 之间绘制线条时出现对齐问题

问题描述 投票：0回答：1

我正在尝试创建一个具有特定样式的垂直导航菜单（如本文所附图片所示）。图像中，有 3 个垂直对齐的圆圈，其大小与字体相同，圆圈通过垂直线连接，每个圆圈旁边都有文字。

我面临的问题是，线条不是从圆圈的底端开始，也不是以圆圈水平居中，如图所示。

我是 UI 方面的新手，下面是我使用 Tailwind 在 React 中的代码：

<div className="flex flex-col h-full w-1/5 mt-16">
  <div 
    className="h-[63rem] w-full flex flex-col align-center mt-8 border rounded-xl border-grey-300 inset-0 bg-custom-purple"
  >
    <h2 className="text-xl text-custom-black text-left mt-8 ml-10 poppins-semibold">
      Heading Text
    </h2>

    <div className="flex flex-col ml-14 mt-16 items-start">
      {menuItems.map((item, index) => (
        <div key={index} className="flex items-center mb-20 relative">
          <div className="w-4 h-4 rounded-full border-2 border-gray-500 bg-white flex justify-center"></div>
          {index !== menuItems.length - 1 && (
            <div className="absolute top-4 bottom-0 left-2 w-0.5 h-24 bg-gray-500"></div>
          )}
          <span className="ml-14 text-md font-medium text-gray-600">{item.label}</span>
        </div>
      ))}
    </div>
  </div>
</div>

为了简洁起见，以下是 

menuItems
：

const menuItems = [
    { label: 'Notifications', icon: faBell },
    { label: 'Email', icon: faEnvelope },
    { label: 'Phone', icon: faPhone },
];

图片：

enter image description here

非常感谢任何形式的帮助，谢谢。

html css reactjs tailwind-css tailwind-ui
1个回答
0
投票

您可以使用一条跨越所有项目的单行，而不是在项目之间使用多行。

const menuItems = [
  { label: 'Notifications' },
  { label: 'Email' },
  { label: 'Phone' },
];

ReactDOM.createRoot(document.getElementById('app')).render(
  <div className="flex flex-col h-full w-1/5 mt-16">
    <div 
      className="h-[63rem] w-full flex flex-col align-center mt-8 border rounded-xl border-grey-300 inset-0 bg-custom-purple"
    >
      <h2 className="text-xl text-custom-black text-left mt-8 ml-10 poppins-semibold">
        Heading Text
      </h2>

      <div className="flex flex-col ml-14 mt-16 items-start relative z-0">
        <div class="absolute -z-10 top-[max(theme(fontSize.base.1.lineHeight)-theme(height.4),0%)] bottom-[calc(theme(margin.20)+max(theme(fontSize.base.1.lineHeight)-theme(height.4),0%))] bg-gray-500 left-2 w-0.5 -translate-x-1/2"/>
        {menuItems.map((item, index) => (
          <div key={index} className="flex items-center mb-20 relative">
            <div className="w-4 h-4 rounded-full border-2 border-gray-500 bg-white flex justify-center"></div>
            <span className="ml-14 text-md font-medium text-gray-600">{item.label}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="app"></div>

我们将 

relative
添加到外部 
flex
父级，使其成为位置父级。我们有一个用 
-z-10
画线的元素，以便它堆叠在项目后面。带有 
-z-10
的 line 元素实际上会绘制在 
<body>
元素后面，因此我们将 
z-0
添加到外部 
relative
父级，以便父级成为新的堆叠上下文，确保可以看到 line 元素。

默认情况下没有 

text-md
类，并且您还没有提供 Tailwind 配置，因此我将忽略此类。因此，我假设文本大小是 Tailwind 预检时的默认设置。元素大小将来自 
line-height
，因为此默认值 (
1.5rem
/
24px
) 将大于 
w-4
、
1rem
/
16px
。圆形元素在 Flex 布局中垂直居中于每个项目的中间，因此我们需要计算第一个元素的顶部与圆形顶部之间的距离。这就是为什么我们在线元素上有 
top-[max(theme(fontSize.base.1.lineHeight)-theme(height.4),0%)]
。

对于 

bottom-[calc(theme(margin.20)+max(theme(fontSize.base.1.lineHeight)-theme(height.4),0%))]
，这涉及相同的计算，
max(theme(fontSize.base.1.lineHeight)-theme(height.4),0%)
。这是因为圆的底部和元素底部之间的差异与顶部差异相同，因为它在垂直中心对齐。 
theme(margin.20)
用于最后一项的 
mb-20
。此 
bottom
和之前的 
top
计算均假设每个项目仅是一行。

对于 

left-2 -translate-x-1/2
，这会将线与圆水平居中。仅具有 
left-2
是不正确的，因为这会将线的左边缘与圆的中心对齐（就像您的尝试一样）。实际上，我们希望圆的中心与线的中心对齐。因此，我们通过从 
translateX(-50%)
应用 
-translate-x-1/2
来偏移线宽度的一半，使其居中。 
50%
值始终与您应用该值的元素的尺寸相关。因此，如果我们选择更改线元素的 
width
，我们不需要更新此类 - 它已经是 
50%
的 
width
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.