如何拓宽侧边栏？解决Angular+CSS侧边栏文本无法单行显示问题

算力阿峰

2026-7-18

Angular侧边栏布局修复：让「Gestion des utilisateurs」单行显示

问题核心

侧边栏内的Gestion des utilisateurs文本因宽度不足自动换行，需调整侧边栏及关联元素的尺寸适配长文本。

修复步骤

1. 调整侧边栏基础宽度

将侧边栏默认宽度从270px增加至300px（可根据实际文本长度微调），同时同步修改主内容区的偏移量：

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 300px; /* 原270px */
  background: #fff;
  z-index: 100;
  transition: all 0.5s ease;
}

.home-section {
  position: relative;
  background: #f3f6f2;
  height: 100vh;
  left: 300px; /* 原270px */
  width: calc(100% - 300px); /* 原270px */
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
}

.sidebar.sidebar-close ~ .home-section {
  left: 60px;
  width: calc(100% - 60px);
}

2. 移除硬编码宽度，使用相对宽度

将nav-links和dropdown-title的硬编码宽度改为100%，跟随侧边栏宽度自适应：

.sidebar .nav-links {
  height: 100%;
  width: 100%; /* 原270px */
  padding-bottom: 150px;
  overflow: auto;
}

.sidebar .nav-links .dropdown-title {
  width: 100%; /* 原270px */
  overflow: hidden;
  transition: all 0.52s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

3. 优化子菜单内边距，避免挤压文本

调整子菜单的内边距，减少不必要的水平空间占用：

.sidebar .nav-links li .sub-menu li:not(:first-child) {
  padding: 5px 40px; /* 原60px */
  border-top: 1px solid #e0e0e0;
}

.sidebar .nav-links li .sub-menu li:last-child {
  padding: 5px 40px; /* 原60px */
  border-top: 1px solid #e0e0e0;
}