无需JavaScript解决Tabs无法在容器内换行的问题

我明白你遇到的困扰——当标签数量增多时，现有纯CSS标签页无法在容器内正常换行，还会被内容区域覆盖。完全不用JavaScript就能解决这个问题，咱们来调整一下CSS布局逻辑：

核心修改思路 #

• 把内容区域从绝对定位改成流式布局，通过order属性让所有内容块统一排在标签的后面，彻底避免覆盖换行的标签
• 调整标签的内边距，避免过宽导致标签难以换行
• 用display配合CSS动画替代绝对定位的opacity控制，让内容切换更流畅稳定

下面是调整后的完整代码：

CSS代码

* { margin: 0; padding: 0; box-sizing: border-box; } /* 新增box-sizing，避免内边距撑开容器 */
h1, h3 { text-transform: uppercase; font-weight: normal; }

.tabs {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
  margin: 40px auto;
  position: relative;
  background: #303030; /* 把背景移到容器，避免内容与标签的背景衔接突兀 */
}

.tabs .tab {
  display: flex;
  flex-direction: column;
}

.tabs .tab>input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.tabs .tab>label {
  padding: 6px 20px; /* 把固定80px内边距改成20px，适配更多标签 */
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  color: #FFF;
  background: #4A83FD;
  transition: background 0.2s ease;
}

.tabs .tab>label:hover {
  background: #3568d4; /* 新增hover效果，提升交互体验 */
}

.tabs .content {
  width: 100%;
  padding: 25px;
  color: #DFDFDF;
  display: none; /* 默认隐藏内容 */
  order: 1; /* 让所有内容块排在标签的后面 */
}

.tabs>.tab>[id^="tab"]:checked+label {
  background: #303030;
  color: #F5F5F5;
}

.tabs>.tab>[id^="tab"]:checked~[id^="tab-content"] {
  display: block; /* 选中标签时显示对应内容 */
  animation: fadeIn 0.4s ease-out; /* 用动画替代opacity过渡，更流畅 */
}

/* 新增淡入动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

HTML代码（可直接复用你原来的，也可以加更多标签测试换行）

<ul class="tabs">
  <li class="tab">
    <input type="radio" name="tabs" checked="checked" id="tab1" />
    <label for="tab1">One</label>
    <div id="tab-content1" class="content">
      <h1>Tab content 1</h1>
      <hr/>
      <h3>Aliquam tristique orci non facilisis lobortis</h3>
      <br/>
      <img src="https://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" width="100" style="float: left; margin-right: 10px;" />
      <p>Interdum et malesuada </p>
    </div>
  </li>
  <li class="tab">
    <input type="radio" name="tabs" id="tab2" />
    <label for="tab2">Two</label>
    <div id="tab-content2" class="content">
      <h1>Tab content 2</h1>
      <hr/>
      <h3>Ut bibendum augue vel magna rhoncus</h3>
      <br/>
      <p>Nam cursus, massa ac imperdiet posuer.</p>
    </div>
  </li>
  <li class="tab">
    <input type="radio" name="tabs" id="tab3" />
    <label for="tab3">Three</label>
    <div id="tab-content3" class="content">
      <h1>Tab content 3</h1>
      <hr/>
      <h3>Praesent ac accumsan urna. Mauris lorem purus</h3>
      <br/>
      <p>Suspendisse vulputate nunc ac pretium pulvinar</p>
    </div>
  </li>
  <li class="tab">
    <input type="radio" name="tabs" id="tab4" />
    <label for="tab4">Four</label>
    <div id="tab-content4" class="content">
      <h1>Tab content 4</h1>
      <hr/>
      <h3>Class aptent taciti sociosqu ad litora torquen</h3>
      <br/>
      <p>Fusce in malesuada ligula. Donec eleifend dui eu mi condimentum interdum. </p>
    </div>
  </li>
  <!-- 新增两个标签测试换行效果 -->
  <li class="tab">
    <input type="radio" name="tabs" id="tab5" />
    <label for="tab5">Five</label>
    <div id="tab-content5" class="content">
      <h1>Tab content 5</h1>
      <hr/>
      <h3>Test tab for wrapping</h3>
      <br/>
      <p>This tab will wrap to the next line properly.</p>
    </div>
  </li>
  <li class="tab">
    <input type="radio" name="tabs" id="tab6" />
    <label for="tab6">Six</label>
    <div id="tab-content6" class="content">
      <h1>Tab content 6</h1>
      <hr/>
      <h3>Another wrapped tab</h3>
      <br/>
      <p>No JS needed, pure CSS solution!</p>
    </div>
  </li>
</ul>

效果说明 #

• 标签现在会根据容器宽度自动换行，不会被内容区域覆盖
• 内容区域始终显示在所有标签的下方，布局更稳定
• 保留了原有的过渡动画效果，交互体验不受影响
• 新增标签hover效果，提升用户交互感

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