如何用HTML/CSS实现类似Windows的自适应任务栏：容纳无限应用按钮且不溢出

我来帮你搞定这个Windows风格任务栏的自适应问题！你当前的问题是Flexbox布局没有设置正确的收缩/扩展规则，导致应用按钮过多时直接挤走了日期时间区域。下面是具体的解决方案和修改后的代码：

核心修改思路 #

1. 固定关键元素宽度：开始按钮和日期时间区域是任务栏的固定组件，要确保它们不会被压缩，始终显示在任务栏上。
2. 让应用区域占据剩余空间：任务栏中间的应用按钮容器要自动填充开始按钮和日期时间之间的所有可用空间。
3. 允许应用按钮收缩：当应用数量过多时，让按钮自动缩小到合理的最小宽度，同时保留文字省略效果，避免内容溢出。

修改后的完整代码 #

HTML部分

<footer>
  <div id="start-menu">
    <div>Item1</div>
    <div>Item2</div>
  </div>
  <div class="left-side">
    <button id="start-button">START</button>
    <ul>
      <li><button>App 1</button></li>
      <li><button>App 2</button></li>
      <li><button>Really Long App Name That Should Ellipsis</button></li>
      <li><button>App 4</button></li>
      <li><button>App 5</button></li>
      <li><button>App 6</button></li>
    </ul>
  </div>
  <div id="date-time-section">
    <button>
      <h2 id="taskbar-time">12:00</h2>
      <h2 id="taskbar-date">24-06-2025</h2>
    </button>
  </div>
</footer>

CSS部分

footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px; /* 给任务栏一个固定高度，方便测试 */
  background-color: #efebeb;
  overflow: hidden; /* 防止任何元素溢出任务栏 */
}

.left-side {
  display: flex;
  align-items: center;
  background-color: #34da34;
  height: 100%;
  flex: 1; /* 占据开始按钮和日期时间之间的所有剩余空间 */
  overflow: hidden; /* 隐藏内部溢出的内容 */
}

.left-side ul {
  list-style: none;
  display: flex;
  background-color: #ef5e5e;
  height: inherit;
  flex: 1; /* 填满left-side中除开始按钮外的剩余空间 */
  margin: 0;
  padding: 0;
}

.left-side ul li {
  display: flex;
  background-color: #d17124;
  height: 100%;
  align-items: center;
  flex-shrink: 1; /* 允许li在空间不足时收缩 */
  flex-grow: 0;
  flex-basis: auto;
  min-width: 80px; /* 按钮的最小宽度，避免缩得太窄 */
}

.left-side ul li button {
  font-size: 1.5rem;
  padding-inline: 0.5rem;
  height: inherit;
  width: 100%; /* 按钮自适应li的宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #046467;
  color: white;
  border: 1px solid #013a3c;
  text-align: left;
}

#start-button {
  font-size: 2rem;
  padding-inline: 1rem;
  height: inherit;
  background-color: #c5c1c1;
  border: 1px solid #8b8c8b;
  flex-shrink: 0; /* 禁止开始按钮收缩，保持固定宽度 */
}

#date-time-section {
  height: 100%;
  flex-shrink: 0; /* 禁止日期时间区域收缩，保持固定宽度 */
}

#date-time-section button {
  font-size: 0.7rem;
  height: inherit;
  padding-inline: 0.5rem;
  padding-block: 0.1rem;
  background-color: #c5c1c1;
  border: 1px solid #8b8c8b;
}

修改说明 #

1. left-side 新增 flex: 1 和 overflow: hidden：让应用按钮容器占据任务栏中间的所有可用空间，同时隐藏内部溢出的内容，避免破坏任务栏布局。
2. start-button 和 date-time-section 新增 flex-shrink: 0：这两个元素是任务栏的固定组件，禁止它们被压缩，确保始终显示在界面上。
3. 应用按钮容器 ul 新增 flex: 1：让它填满 left-side 中除开始按钮外的所有空间，保证按钮能充分利用可用区域。
4. li 新增 min-width 和 flex-shrink: 1：允许按钮在空间不足时收缩到指定的最小宽度，同时不会完全消失；min-width 可以根据你的需求调整。
5. 应用按钮 button 改为 width: 100%：去掉固定宽度，让按钮自适应父元素 li 的宽度，同时保留文字省略效果，处理长应用名称。

现在你可以尝试添加更多的应用按钮，它们会自动缩小并显示文字省略号，而开始按钮和日期时间区域始终稳定显示在任务栏的两端，完全复刻Windows任务栏的自适应行为！

内容来源于stack exchange