调整所有标签选项卡的宽度

Question

我有1300px宽的标签内容。我不明白如何调整带有标签的上部块，使它们在一行中(彼此之间略有缩进，1px(，并且 100% 宽，在 1300px 以内。我也根据需要提供选项卡的代码以及图片。非常感谢您的帮助！[

.rate_selector {
display: flex;
justify-content: center;
width: 100%;
max-width: 100%;
}
.rate_selector_content {
display: flex;
justify-content: space-between;
width: 1300px;
max-width: calc(100% - 100px);
margin: 50px 0 50px 0;
}
.tabs {
font-size: 0;
width: 100%;
}
.tabs>input[type="radio"] {
display: none;
}
.tabs>div {
display: none;
border: 1px solid #e0e0e0;
background-color: #FAFAFA;
font-size: 16px;
}
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3,
#tab-btn-4:checked~#content-4 {
display: flex;
}
.tabs>label {
display: inline-block;
user-select: none;
background-color: #FFFFFF;
border: 1px solid #e0e0e0;
font-size: 16px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
cursor: pointer;
position: relative;
height: 70px;
top: 1px;
}
.tabs>label:not(:first-of-type) {
border-left: none;
}
.tabs>input[type="radio"]:checked+label {
background-color: #FAFAFA;
border-bottom: 1px solid #FAFAFA;
}

<div class="rate_selector">
<div class="rate_selector_content">
<div class="tabs">
<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
<label for="tab-btn-1">Text1</label>
<input type="radio" name="tab-btn" id="tab-btn-2" value="">
<label for="tab-btn-2">Text2</label>
<input type="radio" name="tab-btn" id="tab-btn-3" value="">
<label for="tab-btn-3">Text3</label>
<input type="radio" name="tab-btn" id="tab-btn-4" value="">
<label for="tab-btn-4">Text4</label>
<div id="content-1">
Text content 1
</div>
<div id="content-2">
Text content 2
</div>
<div id="content-3">
Text content 3
</div>
<div id="content-4">
Text content 4
</div>
</div>
</div>
</div>

]1

Answer 1

您可以通过使用flexbox并包装它来实现。

.tabs {
display: flex;
flex-wrap: wrap;
}

现在，您可以在一行中拥有所有内容(标签和内容(。因此，您需要通过将内容区域的宽度设置为 100% 来扩展内容区域。

#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3,
#tab-btn-4:checked~#content-4 {
width: 100%;
}

所以我们实现了我们一开始所拥有的。最后要做的是将弹性增长添加到标签中以填充所有内容。

.tabs>label {
flex-grow: 1;
}

工作代码笔