纯CSS标签页在大尺寸宽屏显示器上垂直排列的问题排查

DevOps 小满

2026-7-2

纯CSS标签页宽屏垂直排列问题修复

问题描述

我之前见过一个类似的标签页问题，但那个案例用了<a>元素，在各类显示器上表现正常，而我的实现没有使用这个元素。

我做的纯CSS标签页在中小尺寸显示器上运行正常，但到了大尺寸及宽屏显示器（比如2400px分辨率）上，标签会变成垂直排列。我尝试修改过.tabs-ids的CSS Grid display属性和flex-wrap属性，也调试过.tabs-label和.tabs-panel元素，但都没效果。

以下是可测试的代码片段：

原CSS代码

:root {
  --ids_color_action_neutral_base: #3B3B3B;
  --ids_color_bg_base: #FFFFFF;
  --ids_color_bg_variant_01: #F1F2F4;
  --ids_color_border_soft: #CFD1D3;
  --ids_size_cornerRadius_button: 0.75rem;
  --ids_size_cornerRadius_tags_01: 0.25rem;
  --ids_size_border_small: 0.0625rem;
  --ids_size_general_8x: 0.5rem;
  --ids_size_general_20x: 1.25rem;
}

.ids-markdown {
  font-family: sans-serif;
  margin: 10px;
  width: 100%;
}

.ids-markdown .tabs-ids {
  display: flex;
  flex-wrap: wrap;
  background: none;
  border: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  border-bottom-left-radius: var(--ids_size_cornerRadius_tags_01);
  border-bottom-right-radius: var(--ids_size_cornerRadius_tags_01);
  border-top-left-radius: var(--ids_size_cornerRadius_button);
  border-top-right-radius: var(--ids_size_cornerRadius_button);
  margin: 20px;
}

.ids-markdown .tabs-ids .tabs-input {
  position: absolute;
  opacity: 0;
}

.ids-markdown .tabs-ids .tabs-label {
  border-right: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  color: var(--ids_color_action_neutral_base);
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.1s, color 0.1s;
  width: auto;
  align-items: center;
  display: flex;
  filter: saturate(0);
  justify-content: center;
  padding: var(--ids_size_general_8x) var(--ids_size_general_20x);
}

.ids-markdown .tabs-ids .tabs-label img {
  height: 1.625rem;
}

.ids-markdown .tabs-ids .tabs-label:hover,
.ids-markdown .tabs-ids .tabs-label:active {
  filter: saturate(1);
}

.ids-markdown .tabs-ids .tabs-input:focus+.tabs-label {
  z-index: 1;
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label:nth-child(2) {
  border-top-left-radius: var(--ids_size_cornerRadius_button);
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label {
  background-color: var(--ids_color_bg_variant_01);
  color: var(--ids_color_action_neutral_base);
  filter: saturate(1);
}

.ids-markdown .tabs-ids .tabs-panel {
  background-color: var(--ids_color_bg_variant_01);
  border-top: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  display: none;
  order: 99;
}

.ids-markdown .tabs-ids .tabs-panel section {
  background: var(--ids_color_bg_base);
  padding: 20px 30px 30px;
}

.ids-markdown .tabs-ids .tabs-panel .pre {
  border: unset;
  border-radius: unset;
  border-bottom-left-radius: var(--ids_size_cornerRadius_tags_01);
  border-bottom-right-radius: var(--ids_size_cornerRadius_tags_01);
  margin: 0px;
  width: 100%;
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label+.tabs-panel {
  display: block;
}

原HTML代码

<div class="ids-markdown">
  <div class="tabs-ids">
    <input class="tabs-input" id="tab-ids-1" name="tabs-ids" type="radio" checked>
    <label class="tabs-label" for="tab-ids-1"><img src="https://cdn-icons-png.flaticon.com/128/546/546049.png" alt="Linux"></label>
    <div class="tabs-panel">
      <section>
        <h1>Arlina Design</h1>
        <p>Arlina Design (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae</p>
        <p>The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise through mutations.</p>
      </section>
    </div>
    <input class="tabs-input" id="tab-ids-2" name="tabs-ids" type="radio">
    <label class="tabs-label" for="tab-ids-2"><img src="https://cdn-icons-png.flaticon.com/128/1532/1532546.png" alt="macOS"></label>
    <div class="tabs-panel">
      <section>
        <h1>Idntheme</h1>
        <p>Idntheme (Citrus tangerina) is an orange-colored citrus fruit that is closely related to, or possibly a type of, mandarin orange (Citrus reticulata).</p>
        <p>The name was first used for fruit coming from Tangier, Morocco, described as a mandarin variety. Under the Tanaka classification system, Citrus tangerina is considered a separate species.</p>
      </section>
    </div>
    <input class="tabs-input" id="tab-ids-3" name="tabs-ids" type="radio">
    <label class="tabs-label" for="tab-ids-3"><img src="https://cdn-icons-png.flaticon.com/128/1532/1532543.png" alt="Windows"></label>
    <div class="tabs-panel">
      <section>
        <h1>Tekno Match</h1>
        <p>Tekno Match (Citrus ×clementina) is a hybrid between a mandarin orange and a sweet orange, so named in 1902. The exterior is a deep orange colour with a smooth, glossy appearance. Clementines can be separated into 7 to 14 segments. Similarly to
          tangerines, they tend to be easy to peel.</p>
      </section>
    </div>
  </div>
</div>

问题根源

当前.tabs-ids使用flex-wrap: wrap，但.tabs-panel仅设置了order: 99，在宽屏环境下，flex容器的布局逻辑会误判标签项的排列空间——虽然面板被放到最后，但容器宽度足够时，标签项并没有被限制在同一行，反而因为flex布局的自动换行规则导致垂直排列。

修复方案

通过给.tabs-panel设置width: 100%强制占满整行，同时调整flex容器的对齐方式，确保标签项始终水平排列：

修改后的关键CSS代码

.ids-markdown .tabs-ids {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* 避免元素垂直拉伸 */
}

.ids-markdown .tabs-ids .tabs-panel {
  width: 100%; /* 强制面板占满整行，把标签挤到上方一行 */
}

.ids-markdown .tabs-ids .tabs-label {
  flex-shrink: 0; /* 防止标签被压缩变形 */
}

完整修复后的CSS代码

:root {
  --ids_color_action_neutral_base: #3B3B3B;
  --ids_color_bg_base: #FFFFFF;
  --ids_color_bg_variant_01: #F1F2F4;
  --ids_color_border_soft: #CFD1D3;
  --ids_size_cornerRadius_button: 0.75rem;
  --ids_size_cornerRadius_tags_01: 0.25rem;
  --ids_size_border_small: 0.0625rem;
  --ids_size_general_8x: 0.5rem;
  --ids_size_general_20x: 1.25rem;
}

.ids-markdown {
  font-family: sans-serif;
  margin: 10px;
  width: 100%;
}

.ids-markdown .tabs-ids {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  background: none;
  border: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  border-bottom-left-radius: var(--ids_size_cornerRadius_tags_01);
  border-bottom-right-radius: var(--ids_size_cornerRadius_tags_01);
  border-top-left-radius: var(--ids_size_cornerRadius_button);
  border-top-right-radius: var(--ids_size_cornerRadius_button);
  margin: 20px;
}

.ids-markdown .tabs-ids .tabs-input {
  position: absolute;
  opacity: 0;
}

.ids-markdown .tabs-ids .tabs-label {
  border-right: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  color: var(--ids_color_action_neutral_base);
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.1s, color 0.1s;
  width: auto;
  align-items: center;
  display: flex;
  flex-shrink: 0;
  filter: saturate(0);
  justify-content: center;
  padding: var(--ids_size_general_8x) var(--ids_size_general_20x);
}

.ids-markdown .tabs-ids .tabs-label img {
  height: 1.625rem;
}

.ids-markdown .tabs-ids .tabs-label:hover,
.ids-markdown .tabs-ids .tabs-label:active {
  filter: saturate(1);
}

.ids-markdown .tabs-ids .tabs-input:focus+.tabs-label {
  z-index: 1;
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label:nth-child(2) {
  border-top-left-radius: var(--ids_size_cornerRadius_button);
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label {
  background-color: var(--ids_color_bg_variant_01);
  color: var(--ids_color_action_neutral_base);
  filter: saturate(1);
}

.ids-markdown .tabs-ids .tabs-panel {
  background-color: var(--ids_color_bg_variant_01);
  border-top: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  display: none;
  order: 99;
  width: 100%;
}

.ids-markdown .tabs-ids .tabs-panel section {
  background: var(--ids_color_bg_base);
  padding: 20px 30px 30px;
}

.ids-markdown .tabs-ids .tabs-panel .pre {
  border: unset;
  border-radius: unset;
  border-bottom-left-radius: var(--ids_size_cornerRadius_tags_01);
  border-bottom-right-radius: var(--ids_size_cornerRadius_tags_01);
  margin: 0px;
  width: 100%;
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label+.tabs-panel {
  display: block;
}

效果说明

width: 100% 给.tabs-panel：强制面板占满flex容器的整行，触发flex-wrap: wrap的换行逻辑，让所有标签项自动排列在上方同一行。
align-items: flex-start 给.tabs-ids：避免容器内元素被垂直拉伸，保持标签和面板的正常布局高度。
flex-shrink: 0 给.tabs-label：防止标签在容器宽度变化时被压缩变形，确保标签的尺寸稳定。

修改后，无论屏幕尺寸多大（包括2400px宽屏），标签都会保持水平排列，面板正常显示在下方。

内容的提问来源于stack exchange，提问作者Oo'-

纯CSS标签页在大尺寸宽屏显示器上垂直排列的问题排查

问题描述 #

原CSS代码 #

原HTML代码 #

问题根源 #

修复方案 #

修改后的关键CSS代码 #

完整修复后的CSS代码 #

效果说明 #