корректировка ширины всех label таба

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]][1]

Answer 1

Например, с помощью flex. Для .tabs добавляем display: flex и сопутствующие стили. Для .tabs>label width: calc((100% / 4) - 1px) где -1рх - отступ между label и box-sizing: border-box, чтобы размер бордера учитывался в общую ширину лейбла . И для содержимого таба width: 100%, чтобы он растягивался на всю ширину

.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%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tabs>input[type="radio"] {
  display: none;
}

.tabs>div {
  display: none;
  border: 1px solid #e0e0e0;
  background-color: #FAFAFA;
  font-size: 16px;
  width: 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 {
  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;
  width: calc(25% - 1px);
  box-sizing: border-box;
}

.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>

БЛОГ НА HUSL

корректировка ширины всех label таба

Ответы (1 шт):