CSS：取消选择的标签从上到下跳转

Question

问题

我已经构建了一个处理多个选项卡（= 无线电输入）的弹出窗口。我的标签的格式工作得很好，但是，如果我选择一个标签，其余的将在框下方而不是在它上方对齐。请参阅下面的两张图片。

我目前的解决方案

到目前为止我尝试了什么

我认为这与我的 CSS 中 label:before 和 label:after 之间的一些不一致有关。我试图从width: 100% 切换到width: fit-content，因为我认为标签可能会覆盖右侧的所有空间。然而，这并没有帮助。这就是为什么我会请你帮我解决我的问题。

（简化的）代码

HTML

.tab-wrapper {
    position: fixed;
    height: 100vh;
    background: #00000050;
    padding-top: 10%;
    padding-left: 20%;
    padding-right: 20%;
    width: 100%;
}

.tab-wrapper input {
    display: none;
}

.tab-wrapper label {
    box-sizing: border-box;
    display: inline-block;
    padding: 15px 25px;
    background-color: blue;
    color: white;
    margin-bottom: -5px;
    border-radius: 5px 5px 0 0;
}

.tab-wrapper + label:before {
    content: '';
    display: block;
    width: 100%;
    height: 15px;
    position: absolute;
    bottom: -11px;
    left: 0;
    z-index:10;
}

.tab-wrapper label:hover {
    cursor: pointer;
}

.tab-wrapper input:checked + label {
    position: relative;
    background-color: white;
    color: black;
    border-radius: 5px 5px 0 0;
}

.tab-wrapper input:checked + label:after {
    display: block;
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

#content0, #content1, #content2, #content3, #content4 {
    display: none;
    background-color: white;
    padding: 15px;
    border-radius: 0 8px 8px 8px;
}

#tab0:checked ~ #content0,
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
    display: block;
    box-shadow: 0 0 15px #939393;
}

<div className="tab-wrapper">
  <input className="tabs" id="tab0" name="tabs" type="radio" checked="true" />
  <label for="tab0">
    luca5
  </label>
  <div id="content0">
    <h3>Some dummy content</h3>
  </div>
  <input className="tabs" id="tab1" name="tabs" type="radio" />
  <label for="tab1">
    luca3
  </label>
  <div id="content1">
    <h3>Some dummy content</h3>
  </div>
</div>

CSS

Answer 1

只需更改第二个输入（和标签）的位置。当您显示第一个 DIV 时，DOM 的正常对齐方式将您的输入移动到 DIV 下方。

.tab-wrapper {
    position: fixed;
    height: 100vh;
    background: #00000050;
    padding-top: 10%;
    padding-left: 20%;
    padding-right: 20%;
    width: 100%;
}

.tab-wrapper input {
    display: none;
}

.tab-wrapper label {
    box-sizing: border-box;
    display: inline-block;
    padding: 15px 25px;
    background-color: blue;
    color: white;
    margin-bottom: -5px;
    border-radius: 5px 5px 0 0;
}

.tab-wrapper + label:before {
    content: '';
    display: block;
    width: 100%;
    height: 15px;
    position: absolute;
    bottom: -11px;
    left: 0;
    z-index:10;
}

.tab-wrapper label:hover {
    cursor: pointer;
}

.tab-wrapper input:checked + label {
    position: relative;
    background-color: white;
    color: black;
    border-radius: 5px 5px 0 0;
}

.tab-wrapper input:checked + label:after {
    display: block;
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

#content0, #content1, #content2, #content3, #content4 {
    display: none;
    background-color: white;
    padding: 15px;
    border-radius: 0 8px 8px 8px;
}

#tab0:checked ~ #content0,
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
    display: block;
    box-shadow: 0 0 15px #939393;
}

<div className="tab-wrapper">
  <input className="tabs" id="tab0" name="tabs" type="radio" checked="true" />
  <label for="tab0">
    luca5
  </label>
  <input className="tabs" id="tab1" name="tabs" type="radio" />
  <label for="tab1">
    luca3
  </label>
  <div id="content0">
    <h3>Some dummy content 1 </h3>
  </div>
  <div id="content1">
    <h3>Some dummy content 2 </h3>
  </div>
</div>