如何将React中的垂直Div转为水平Div？请排查代码问题

我需要将带边框的垂直Div转换为水平布局，尝试多种方案后仍未得到预期效果，以下是我的代码，请帮忙排查CSS或JS中导致该问题的原因。

Dashboard.js #

import React from "react";
import './index.css';
import Vote from './Election-Icon-us9w3f.png';
import Result from './electronic_vote_online_election_electionchamp-300x300.png';
import Candidate from './1677482073445.png';
import {
  Container,
} from "react-bootstrap";

function Dashboard() {
  const divStyle = {
    display: 'inline-block'};
  return (
    <>
      <Container>
      <div class="links" style={divStyle}>
    <table>
    <ul class="links__list">
      <tr class="links__item">
        <a class="links__link" href="#" id="candilist">
            <img src={Candidate} alt="" class="links__icon"/>
            <span class="links__text">CANDIDATE LIST</span>
        </a>
      </tr>
      <tr class="links__item">
        <a class="links__link" href="votinglist.html">
            <img src={Vote} alt="" class="links__icon"/>
          <span class="links__text" id="vote">VOTE HERE</span></a>
      </tr>
      <tr class="links__item">
        <a class="links__link" href="#">
            <img src={Result} alt="" class="links__icon"/>
          <span class="links__text" id="res">RESULT</span>
        </a>
        </tr>
        </ul>
    </table>
</div>
      </Container>
    </>
  );
}

export default Dashboard;

index.css #

.links {
  --link-size: calc(var(--base-grid)*20);
  color: var(--colour--white);
  position: absolute;
  display:flex;
  justify-content:baseline;
  align-items: baseline;
  width: auto;
  min-height: auto;
  list-style-type: none;
  flex-direction:row;
  border: 5px solid black;
}
.links__list {
  position: relative;
  list-style: none;
  text-decoration:none;
}
.links__item {
  width: var(--link-size);
  height: var(--link-size);
  position:relative;
  top: 0;
  left:0;
  margin-top: calc(var(--link-size)/-2);
  margin-left: calc(var(--link-size)/-2);
  --angle: calc(360deg/var(--item-total));
  --rotation: calc(140deg + var(--angle)*var(--item-count));
  transform: rotate(var(--rotation)) translate(calc(var(--link-size) + var(--base-grid)*2)) rotate(calc(var(--rotation)*-1));
  --item-count:5;
}



.links__link {
  opacity: 1;
  animation: on-load .3s ease-in-out forwards;
  animation-delay: calc(var(--item-count)*150ms);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background-color: var(--colour-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: inherit;
  text-decoration:none;
}

.links__icon {
  width: calc(var(--base-grid)*8);
  height: calc(var(--base-grid)*8);
  transition: all .1s ease-in-out;
  fill: var(--colour-black);
  height: 250px;
  width: 250px;
}

.links__text {
  color: black;
  position:relative;
  width: 100%;
  right: 38%;
  text-align: end;
  height: calc(var(--base-grid)*2);
  font-size: calc(var(--base-grid)*2);
  display: none;
  bottom: calc(var(--base-grid)*8.5);
  animation: text .3s ease-in-out forwards;
  text-decoration:none; 
  text-decoration: none;

}

问题根源分析 #

1. HTML结构严重错误

   • 将<ul>嵌套在<table>内，还把<tr>作为<ul>的子元素，完全违反HTML规范：<ul>的合法子元素只能是<li>，<table>的子元素应为<thead>/<tbody>等标签，错误结构直接导致布局渲染混乱。

2. Flex布局被行内样式覆盖

   • CSS中给.links设置了display:flex和flex-direction:row，但JS里又给该元素添加行内样式display: inline-block，直接覆盖了flex布局，失去了水平排列的基础逻辑。

3. 环形布局CSS逻辑干扰

   • .links__item内的transform: rotate(...) translate(...)是用于实现环形排列的代码，还硬编码了--item-count:5（实际只有3个元素），这会让每个元素旋转偏移，彻底破坏水平布局的排列规则。

4. 绝对定位导致脱离文档流

   • .links设置了position: absolute，如果父容器未设置position: relative，该元素会脱离正常文档流，无法与其他元素正常排列，也会影响自身的布局范围。

5. 负margin加剧布局错位

   • .links__item的margin-top和margin-left均为负值，会导致元素互相重叠，进一步打乱水平排列的布局结构。

快速修复建议 #

1. 修正HTML结构
   删除<table>标签，将所有<tr>替换为<li>，同时移除JS中的divStyle行内样式，正确结构如下：

   <div class="links">
     <ul class="links__list">
       <li class="links__item">...</li>
       <li class="links__item">...</li>
       <li class="links__item">...</li>
     </ul>
   </div>
   

2. 清除环形布局CSS
   删除.links__item内的transform、--angle、--rotation、--item-count相关代码，调整margin为合理水平间距：

   .links__item {
     width: var(--link-size);
     height: var(--link-size);
     position: relative;
     margin: 0 10px; /* 替换负margin，设置水平间距 */
   }
   

3. 调整Flex布局参数
   修改.links的CSS，移除绝对定位（或给父容器添加position: relative），调整对齐方式：

   .links {
     --link-size: calc(var(--base-grid)*20);
     color: var(--colour--white);
     /* 移除position: absolute */
     display:flex;
     justify-content:flex-start; /* 可改为space-around等你需要的对齐方式 */
     align-items: center;
     width: auto;
     min-height: auto;
     list-style-type: none;
     flex-direction:row;
     border: 5px solid black;
     padding: 10px; /* 添加内边距避免内容贴边框 */
   }
   

4. 调整图标和文字布局
   若需要图标与文字水平排列，修改.links__link的flex-direction为row，并重置.links__text的定位：

   .links__link {
     /* 保留其他原有代码 */
     flex-direction: row; /* 改为水平排列 */
     gap: 10px; /* 设置图标与文字的间距 */
   }
   .links__text {
     display: block; /* 显示文字 */
     position: static; /* 移除相对定位 */
     right: auto;
     bottom: auto;
     text-align: left;
   }
   

内容的提问来源于stack exchange，提问作者MR_DEVLOPER 01