React排序可视化项目导航栏组件溢出问题求助

AI 小北

2026-6-24

React排序可视化导航栏内容溢出问题修复

问题描述

开发React排序可视化项目时，导航栏内的排序算法选项（Bubble Sort、Selection Sort等）溢出到导航栏外部，无法全部容纳在设置的80px高度内。

问题根源

导航栏设置固定高度但未做横向布局处理，内部块级元素默认换行，超出高度后溢出
排序算法的<p>标签默认带有上下外边距，增加了垂直方向的空间占用
数值显示标签的块级布局导致整体布局混乱

修复步骤

1. 重构导航栏布局

修改.nav-bar的CSS，使用弹性布局实现横向排列，并处理溢出：

.nav-bar {
    background-color: black;
    opacity: 75%;
    height: 80px;
    display: flex;
    align-items: center; /* 垂直居中所有内部元素 */
    overflow-x: auto; /* 内容超出宽度时显示横向滚动条 */
    padding: 0 15px; /* 左右内边距避免元素贴边 */
    gap: 15px; /* 统一元素间的间距，替代零散的margin */
}

2. 调整排序算法标签样式

统一处理所有排序选项的<p>标签，去掉多余外边距并优化交互：

.bubble-sort, .selection-sort, .insertion-sort, .quick-sort, .merge-sort, .heap-sort {
    color: #999;
    margin: 0;
    cursor: pointer;
    white-space: nowrap; /* 防止文字换行 */
}

.bubble-sort:hover, .selection-sort:hover, .insertion-sort:hover, .quick-sort:hover, .merge-sort:hover, .heap-sort:hover {
    color: #00e8fd;
}

3. 修正数值显示标签布局

调整.range-value的样式，适配弹性布局：

.range-value {
    font-size: 30px;
    color: #999;
    font-weight: 400;
}

4. 优化滑块与按钮的间距

去掉按钮的margin-left，利用导航栏的gap统一控制间距：

button {
    border-radius: 7px;
    padding: 5px 10px;
    border: none;
    background-color: #00e8fd;
}

button:hover {
    box-shadow: 0 0 10px 2px #00e8fd;
}