如何修复我的 HTML/CSS 代码，使其不与 PHPBB 论坛帖子中的帖子正文重叠

Question

我只想用 HTML+CSS 发表一篇文章，我在顶部有四个选项卡，根据我单击的选项卡，我会在帖子中看到不同的内容。我确实有一个代码，但问题是我的选项卡内容与帖子正文重叠。

<div class="tabs-container">
  <div class="tab-header">
    <div class="tab-content"></div>
    <div class="tabs">
      <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1" checked>
        <label for="tab-1">Tab 1</label>
        <div class="tab-content">Default content</div>
      </div>
      <div class="tab">
        <input type="radio" id="tab-2" name="tab-group-1">
        <label for="tab-2">Tab 2</label>
        <div class="tab-content">Tab 2 Content</div>
      </div>
      <div class="tab">
        <input type="radio" id="tab-3" name="tab-group-1">
        <label for="tab-3">Tab 3</label>
        <div class="tab-content">Tab 3 Content</div>
      </div>
      <div class="tab">
        <input type="radio" id="tab-4" name="tab-group-1">
        <label for="tab-4">Tab 4</label>
        <div class="tab-content">Tab 4 Content</div>
      </div>
    </div>
  </div>
  <style>
    .tabs {
      position: relative;
      width: 100%;
    }
    
    .tab {
      float: left;
    }
    
    .tab label {
      background: pink;
      color: #d1cec4;
      padding: 5px;
      right: 5px;
      margin-right: 10px;
      text-align: center;
      word-spacing: 3px;
      text-transform: uppercase;
      font-size: 13px;
    }
    
    .tab [type=radio] {
      display: none;
    }
    
    .tab-content {
      position: absolute;
      top: 18px;
      height: auto;
      width: 100%;
      background: blue;
      left: 0px;
      -webkit-transform: scale(0);
      -o-transform: scale(0);
      -moz-transform: scale(0);
    }
    
    [type=radio]:checked~label {
      background: transparent;
      z-index: 2;
      color: #494949;
    }
    
    [type=radio]:checked~label~.tab-content {
      z-index: 1;
      -webkit-transform: scale(1);
      -o-transform: scale(1);
      -moz-transform: scale(1);
    }
  </style>
</div>

这是我的代码。

我尝试删除内容框的绝对高度，但我的选项卡不再位于顶部，因为每个选项卡内容都位于其选项卡按钮之后，而不是所有选项卡按钮都位于顶部。

代码如下所示：

<div class="tabs-container">
  <div class="tabs-wrapper">
    <div class="tabs-header">
      <div class="tab">
        <input type="radio" id="tab-1" name="tab-group" checked>
        <label for="tab-1">Tab 1</label>
        <div class="tab-content">Tab 1 content</div>
      </div>
      <div class="tab">
        <input type="radio" id="tab-2" name="tab-group">
        <label for="tab-2">Tab 2</label>
        <div class="tab-content">Tab 2 content</div>
      </div>
      <div class="tab">
        <input type="radio" id="tab-3" name="tab-group">
        <label for="tab-3">Tab 3</label>
        <div class="tab-content">Tab 3 content</div>
      </div>
      <div class="tab">
        <input type="radio" id="tab-4" name="tab-group">
        <label for="tab-4">Tab 4</label>
        <div class="tab-content">Tab 4 content</div>
      </div>
    </div>
  </div>

  <style>
    .tabs-header {
      position: relative;
      width: 100%;
    }
    
    .tab {
      float: left;
    }
    
    .tab label {
      background: pink;
      color: #d1cec4;
      padding: 5px;
      margin-right: 10px;
      text-align: center;
      word-spacing: 3px;
      text-transform: uppercase;
      font-size: 13px;
    }
    
    .tab [type=radio] {
      display: none;
    }
    
    .tab-content {
      display: none;
      padding: 10px;
      background: blue;
      width: 100%;
      left: 0px;
      box-sizing: border-box;
    }
    
    [type=radio]:checked+label+.tab-content {
      display: block;
    }
    
    .tabs-header::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</div>

我也多次要求 ChatGPT 以某种方式修复它，但到目前为止没有任何效果。

Answer 1

要么设置固定的

height

，要么失去绝对值。为了做到这一点并保持设计，我更改了标记以仅使用一个

.tab-content

区域。

<div class="tabs-container">
  <div class="tab-header">

    <div class="tabs">
      <input type="radio" id="tab-1" name="tab-group-1" checked>
      <label for="tab-1" class="tab-label">Tab 1</label>

      <input type="radio" id="tab-2" name="tab-group-1">
      <label for="tab-2" class="tab-label">Tab 2</label>

      <input type="radio" id="tab-3" name="tab-group-1">
      <label for="tab-3" class="tab-label">Tab 3</label>

      <input type="radio" id="tab-4" name="tab-group-1">
      <label for="tab-4" class="tab-label">Tab 4</label>

      <div class="tab-content">
        <div class="content" data-tab-content="tab-1">Default content</div>
        <div class="content" data-tab-content="tab-2">Tab 2 Content</div>
        <div class="content" data-tab-content="tab-3">Tab 3 Content</div>
        <div class="content" data-tab-content="tab-4">Tab 4 Content</div>
      </div>
    </div>
  </div>

  <br>
  <p>This content appears below the tabs.</p>

  <style>
    .tabs {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      border-bottom: 2px solid #ddd;
      padding-bottom: 5px;
    }
    
    .tab-label {
      background: pink;
      color: #494949;
      padding: 5px;
      margin-right: 10px;
      text-align: center;
      text-transform: uppercase;
      font-size: 13px;
      cursor: pointer;
      display: inline-block;
    }
    
    .tab-content {
      margin-top: 10px;
      background: blue;
      color: white;
      padding: 10px;
      width: 100%;
    }
    
    .content {
      display: none;
    }
    
    #tab-1:checked~.tab-content [data-tab-content="tab-1"],
    #tab-2:checked~.tab-content [data-tab-content="tab-2"],
    #tab-3:checked~.tab-content [data-tab-content="tab-3"],
    #tab-4:checked~.tab-content [data-tab-content="tab-4"] {
      display: block;
    }
    
    [type=radio]:checked+.tab-label {
      background: yellow;
    }
    
    .tabs [type=radio] {
      display: none;
    }
  </style>
</div>