非移动端下如何限制屏幕仅显示3个元素，其余隐藏？

API 探路者

2026-8-7

问题描述

当前页面有4个box元素（后续会增加至9个），需求如下：

在非移动端设备上，屏幕始终仅显示3个box
其余未显示的box排列在序列右侧，但处于隐藏状态
曾尝试寻找纯HTML+CSS的实现方法但未找到，询问是否可通过HTML、CSS或JavaScript实现该需求。

现有代码

CSS 代码

.bioSlider {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.box {
  position: relative;
  display: inline-block;
  width: 390px;
  padding: 10px;
}

.slideImage {
  position: relative;
  height: 300px;
}

.slideImage img {
  object-fit: cover;
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #000000;
  opacity: 0;
  transition: 0.6s ease-in-out;
}

.quoteText {
  position: absolute;
  text-align: left;
  font-style: italic;
  word-break: break-all;
  padding: 30px;
  top: 30px;
  color: #e5e5e5;
  opacity: 0;
  transition: 0.6s ease-in-out;
}

.detailBox {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 100%;
  padding: 9px;
  background-color: #e8e8e8;
}

.slideImage:hover .overlay {
  opacity: 50%;
}

.slideImage:hover .quoteText {
  opacity: 100%;
}

HTML 代码

<div>
  <!-- Cadet Slider -->
  <ul class='bioSlider'>
    <li class='cadetOne'>
      <div class='box'>
        <div class='slideImage'>
          <img src='/Images/Red_Card.png' alt=''>
          <div class='overlay'> </div>
          <div class='bodyTextContainer'>
            <p class='quoteText'>"Poopoopeepee"</p>
          </div>
        </div>
        <div class='detailBox'>
          <div class='subHeaderTextContainer'>
            <h3 class='subHeaderText_1'>Battalion CDR <br> LTC Chase Hinson</h3>
          </div>
        </div>
      </div>
    </li>

    <li class='cadetTwo'>
      <div class='box'>
        <div class='slideImage'>
          <img src='/Images/Yellow_Card.png' alt=''>
          <div class='overlay'></div>
          <div class='bodyTextContainer'>
            <p class='quoteText'>"Poopoopeepee"</p>
          </div>
        </div>
        <div class='detailBox'>
          <div class='subHeaderTextContainer'>
            <h3 class='subHeaderText_1'>Battalion XO <br> MAJ Grayson Akins</h3>
          </div>
        </div>
      </div>
    </li>

    <li class='cadetThree'>
      <div class='box'>
        <div class='slideImage'>
          <img src='/Images/Blue_Card.png' alt=''>
          <div class='overlay'></div>
          <div class='bodyTextContainer'>
            <p class='quoteText'>"Poopoopeepee"</p>
          </div>
        </div>
        <div class='detailBox'>
          <div class='subHeaderTextContainer'>
            <h3 class='subHeaderText_1'>Battalion NCO <br> CSM Janecia Bass</h3>
          </div>
        </div>
      </div>
    </li>

    <li class='cadetFour'>
      <div class='box'>
        <div class='slideImage'>
          <img src='/Images/Green_Card.png' alt=''>
          <div class='overlay'></div>
          <div class='bodyTextContainer'>
            <p class='quoteText'>"Poopoopeepee"</p>
          </div>
        </div>
        <div class='detailBox'>
          <div class='subHeaderTextContainer'>
            <h3 class='subHeaderText_1'>Battalion S1 <br> CPT Lauren Newton</h3>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

解决方案

纯CSS实现（无需JavaScript）

你的需求完全可以通过纯CSS实现，核心思路是：

给.bioSlider设置固定宽度，宽度为3个box的总宽度（包含内边距）
移除.bioSlider的justify-content: center，让子元素从左侧排列
保留overflow: hidden隐藏超出容器的box
使用媒体查询，仅在非移动端应用该规则，移动端可以显示全部或自适应

修改后的CSS代码如下：

.bioSlider {
  position: relative;
  display: flex;
  /* 移除justify-content: center，让box从左排列 */
  overflow: hidden;
  /* 3个box的总宽度：3*(390px + 10px*2) = 3*410px = 1230px */
  width: 1230px;
  /* 让容器居中 */
  margin: 0 auto;
}

.box {
  position: relative;
  display: inline-block;
  width: 390px;
  padding: 10px;
  /* 确保box不被flex容器压缩 */
  flex-shrink: 0;
}

/* 媒体查询：移动端设备（比如屏幕宽度小于768px）时，自适应显示 */
@media (max-width: 767px) {
  .bioSlider {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .box {
    width: calc(100% - 20px);
  }
}

/* 以下保留原有样式 */
.slideImage {
  position: relative;
  height: 300px;
}

.slideImage img {
  object-fit: cover;
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #000000;
  opacity: 0;
  transition: 0.6s ease-in-out;
}

.quoteText {
  position: absolute;
  text-align: left;
  font-style: italic;
  word-break: break-all;
  padding: 30px;
  top: 30px;
  color: #e5e5e5;
  opacity: 0;
  transition: 0.6s ease-in-out;
}

.detailBox {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 100%;
  padding: 9px;
  background-color: #e8e8e8;
}

.slideImage:hover .overlay {
  opacity: 50%;
}

.slideImage:hover .quoteText {
  opacity: 100%;
}

关键修改说明

给.bioSlider设置固定宽度1230px，正好容纳3个box（每个宽390px+左右padding各10px）
给.box添加flex-shrink: 0，防止flex容器压缩box宽度
用margin: 0 auto让整个slider在页面居中
媒体查询针对移动端做自适应，让box占满屏幕宽度并换行

JavaScript增强（可选）

如果需要添加滑动切换功能（比如左右按钮切换显示的3个box），可以用简单的JavaScript实现，核心逻辑是修改.bioSlider的scrollLeft值：

示例JS代码：

// 获取slider元素
const slider = document.querySelector('.bioSlider');
// 单个box的总宽度（含padding）：390+20=410px
const boxWidth = 410;

// 左按钮点击事件
document.querySelector('.prev-btn')?.addEventListener('click', () => {
  slider.scrollBy({ left: -boxWidth * 3, behavior: 'smooth' });
});

// 右按钮点击事件
document.querySelector('.next-btn')?.addEventListener('click', () => {
  slider.scrollBy({ left: boxWidth * 3, behavior: 'smooth' });
});

需要在HTML中添加左右按钮：

<div style="position: relative; max-width: 1230px; margin: 0 auto;">
  <button class="prev-btn">←</button>
  <!-- Cadet Slider -->
  <ul class='bioSlider'>
    <!-- 原有li内容 -->
  </ul>
  <button class="next-btn">→</button>
</div>

然后给按钮添加基础样式：

.prev-btn, .next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 15px;
  font-size: 20px;
  border: none;
  background-color: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  z-index: 10;
}

.prev-btn {
  left: 20px;
}

.next-btn {
  right: 20px;
}

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

非移动端下如何限制屏幕仅显示3个元素，其余隐藏？

现有代码 #

CSS 代码 #

HTML 代码 #

纯CSS实现（无需JavaScript） #

关键修改说明 #