Блог

Главная - Вопросы по программированию - Ошибка при попытке создать вкладки с помощью Css?

Ошибка при попытке создать вкладки с помощью Css?

#html #css

Вопрос:

   .container {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 0;
    box-shadow: 0 0 100px RGBa(0,0,0,0.5);
    border-radius: 3px;
    overflow: hidden;
    input {
      display: none;
      amp;:checked   label {
        background: #eee;
      }
      @for $i from 1 through 4 {
        amp;#tab#{$i}:checked {
          ~ .line {
            left: #{($i - 1) * 25%};
          }
          ~ .content-container #c#{$i} {
            opacity: 1;
          }
        }
      }
    }
    label {
      display: inline-block;
      font-size: 16px;
      height: 36px;
      line-height: 36px;
      width: 25%;
      text-align: center;
      background: #f4f4f4;
      color: #555;
      position: relative;
      transition: 0.25s background ease;
      cursor: pointer;
      amp;::after {
        content: "";
        height: 2px;
        width: 100%;
        position: absolute;
        display: block;
        background: #ccc;
        bottom: 0;
        opacity: 0;
        left: 0;
        transition: 0.25s ease;
      }
      amp;:hover::after {
        opacity: 1;
      }
    }
    .line {
      position: absolute;
      height: 2px;
      background: #1E88E5;
      width: 25%;
      top: 34px;
      left: 0;
      transition: 0.25s ease;
    }
  } 
 <div class="container">
  <input type="radio" id="tab1" name="tab" checked>
  <label for="tab1"> Features</label>
  <input type="radio" id="tab2" name="tab">
  <label for="tab2"> History</label>
  <input type="radio" id="tab3" name="tab">
  <label for="tab3">Reviews</label>
  <input type="radio" id="tab4" name="tab">
  <label for="tab4"> Share</label>
  <input type="radio" id="tab5" name="tab">
  <label for="tab5"> Share</label>
  <input type="radio" id="tab6" name="tab">
  <label for="tab6"> Share</label>
  <input type="radio" id="tab7" name="tab">
  <label for="tab7"> Share</label>
  <div class="line"></div>

</div>

Я работаю над вкладками с помощью css. Из 7 вкладок я могу выбрать только 4 вкладки, а оставшиеся 3 вкладки отображаются в следующей строке, и даже не удается выбрать, а радиус границы также не применяется.

Хотите выровнять все 7 вкладок в одну линию и применить цвет нижней границы для всех 7 вкладок.

Это мой кодовый ключ https://codepen.io/santoshch/pen/QWpLZYd

Ответ №1:

Вы установили фиксированную ширину контейнера, чтобы метка не была футами этой ширины, чтобы они опускались в следующей строке.

  1. Чтобы исправить это, вам нужно увеличить ширину контейнера и установить ширину этикетки
  2. Работают только 4 вкладки, потому что ваш цикл for зацикливается только 4 раза, вам нужно установить 7 раз

Вот работает скрипка

 .container {
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0;
  box-shadow: 0 0 100px RGBa(0, 0, 0, 0.5);
  border-radius: 3px;
  overflow: hidden;
}
.container input {
  display: none;
}
.container input:checked   label {
  background: #eee;
}
.container input#tab1:checked ~ .line {
  left: 0%;
}
.container input#tab1:checked ~ .content-container #c1 {
  opacity: 1;
}
.container input#tab2:checked ~ .line {
  left: 14.28%;
}
.container input#tab2:checked ~ .content-container #c2 {
  opacity: 1;
}
.container input#tab3:checked ~ .line {
  left: 28.56%;
}
.container input#tab3:checked ~ .content-container #c3 {
  opacity: 1;
}
.container input#tab4:checked ~ .line {
  left: 42.84%;
}
.container input#tab4:checked ~ .content-container #c4 {
  opacity: 1;
}
.container input#tab5:checked ~ .line {
  left: 57.12%;
}
.container input#tab5:checked ~ .content-container #c5 {
  opacity: 1;
}
.container input#tab6:checked ~ .line {
  left: 71.4%;
}
.container input#tab6:checked ~ .content-container #c6 {
  opacity: 1;
}
.container input#tab7:checked ~ .line {
  left: 85.68%;
}
.container input#tab7:checked ~ .content-container #c7 {
  opacity: 1;
}
.container label {
  display: inline-block;
  font-size: 16px;
  height: 36px;
  line-height: 36px;
  width: 10.28%;
  text-align: center;
  background: #f4f4f4;
  color: #555;
  position: relative;
  transition: 0.25s background ease;
  cursor: pointer;
  padding: 0 10px;
}
.container label::after {
  content: "";
  height: 2px;
  width: 100%;
  position: absolute;
  display: block;
  background: #ccc;
  bottom: 0;
  opacity: 0;
  left: 0;
  transition: 0.25s ease;
}
.container label:hover::after {
  opacity: 1;
}
.container .line {
  position: absolute;
  height: 2px;
  background: #1e88e5;
  width: 14.28%;
  top: 34px;
  left: 0;
  transition: 0.25s ease;
} 
 <div class="container">
  <input type="radio" id="tab1" name="tab" checked>
  <label for="tab1"> Features</label>
  <input type="radio" id="tab2" name="tab">
  <label for="tab2"> History</label>
  <input type="radio" id="tab3" name="tab">
  <label for="tab3">Reviews</label>
  <input type="radio" id="tab4" name="tab">
  <label for="tab4"> Share</label>
  <input type="radio" id="tab5" name="tab">
  <label for="tab5"> Share</label>
  <input type="radio" id="tab6" name="tab">
  <label for="tab6"> Share</label>
  <input type="radio" id="tab7" name="tab">
  <label for="tab7"> Share</label>
  <div class="line"></div>

</div>
Метки: