再次使用 CSS 选项卡

Question

我无法根据作业更改html代码。如何在内容上方制作按钮。困难在于标签包含在选项卡中。当您单击标签时，该选项卡将被分配活动类。

竖版没有问题（如果按钮位于内容左侧）。

$(".option").on('click', function () {
    $('.tab.active').removeClass('active');
    $(this).closest('.tab').addClass("active");
});

.tabs{
  display:flex;
  align-items: flex-start;
}

.tab{
  display: block;
  order:1;
}

label{
background: #999;
  top: 0;
  order: 0;
  margin-right:10px;
}

.option-details{
display: none;
}

.tab.active .option-details{
display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="tabs">
    <div class="tab active">
  <label class="option">
    <input name="delivery_id" type="radio" checked="checked" value="4546661" />
    <span>
      header 1
    </span>
  </label>
  <div class="option-details">
    Content 1
  </div>
</div>
    <div class="tab">
  <label class="option">
    <input name="delivery_id" type="radio" value="65465" />
    <span>
      header 2
    </span>
  </label>
  <div class="option-details">
    Content 2               
  </div>
</div>
</div>

我设法使用了 flexbox 和 order，但是在这种情况下，第二个标签在内容 1 的宽度上与第一个标签相比有一个缩进。在我的版本中，这只能通过 javascript 实现，或者是否可以在 CSS 中以某种方式实现？

Answer 1

这就是我所需要的。但也许有一个更优雅的解决方案

$(".option").on('click', function () {
    $('.tab.active').removeClass('active');
    $(this).closest('.tab').addClass("active");
  });

.tabs {
    display: grid;
    grid-template-areas: "A B" "C C";
}

.tab {
    display: contents;
}
label {
    background: #999;
}

.option-details {
    display: none;
    grid-area: C;
}

.tab.active .option-details {
    display: grid;
    grid-column: span 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="tabs">
    <div class="tab active">
  <label class="option">
    <input name="delivery_id" type="radio" checked="checked" value="4546661">
    <span>
      header 1
    </span>
  </label>
  <div class="option-details">
    Content 1
  </div>
</div>
    <div class="tab">
  <label class="option">
    <input name="delivery_id" type="radio" value="65465">
    <span>
      header 2
    </span>
  </label>
  <div class="option-details">
    Content 2               
  </div>
</div>
</div>