0

введите сюда описание изображения

Есть такой список, нужно чтобы между элементами было расстояние в 35 пикселей. У меня прописан параметр column-gap 35 пикселей, но он не срабатывает, наоборот немного даже делает это расстояние шире. Почему так происходит?

.section-playlist__category-list {
  columns: 2;
  column-gap: 35px;
}
<ul class="section-playlist__category-list">
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="post-punk">
    <label class="label" for="post-punk">
                Постпанк
              </label>
  </li>
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="hardcore">
    <label class="label" for="hardcore">
                Хардкор
              </label>
  </li>
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="punk-rock">
    <label class="label" for="punk-rock">
                Панк-рок
              </label>
  </li>
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="rock">
    <label class="label" for="rock">
                Рок
              </label>
  </li>
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="Progressive-rock">
    <label class="label" for="Progressive-rock">
                Прогрессивный рок
              </label>
  </li>
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="Electronic-music">
    <label class="label" for="Electronic-music">
                Электронная музыка
              </label>
  </li>
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="Classical-music">
    <label class="label" for="Classical-music">
                Классическая музыка
              </label>
  </li>
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="Nature-sounds">
    <label class="label" for="Nature-sounds">
                Звуки природы и шум города
              </label>
  </li>
</ul>

3
  • Все правильно работает...
    – Air
    7 июл 2022 в 6:20
  • @Air я задал ширину в 35 пикселей, там на картинке видно что примерно 200-300 пикселей. Или я не правильно понимаю как это свойство работает?
    – kaucap
    7 июл 2022 в 7:05
  • ты все верно понимаешь, просто ты не понимаешь где у тя что находиться... задай все элементам разные цвета фона и увидишь, где у тя что находиться и почему я говорю, что там все верно
    – Air
    7 июл 2022 в 7:42

1 ответ 1

1
  1. Ширина элементов li равна ширине самого широкого из них.
  2. Ширина всего списка у Вас не задана и равна ширине родителя.
  3. column-gap -- значение "не меньше", если Вы уменьшите родителя (или окно браузера) и не будет возможности обеспечить нужную ширину column-gap -- количество колонок уменьшится.

.section-playlist__category-list {
  columns: 2;
  column-gap: 35px;
  max-width: fit-content;
}

li.section-playlist__category-item {
  border: 1px dotted darkred;
}
<ul class="section-playlist__category-list">
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="post-punk">
    <label class="label" for="post-punk">1</label>
  </li>
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="hardcore">
    <label class="label" for="hardcore">12</label>
  </li>
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="punk-rock">
    <label class="label" for="punk-rock">1234</label>
  </li>
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="rock">
    <label class="label" for="rock">12345</label>
  </li>
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="Progressive-rock">
    <label class="label" for="Progressive-rock">1234</label>
  </li>
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="Electronic-music">
    <label class="label" for="Electronic-music">123</label>
  </li>
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="Classical-music">
    <label class="label" for="Classical-music">12</label>
  </li>
  <li class="section-playlist__category-item">
    <input type="radio" class="custom-checkbox" name="music" id="Nature-sounds">
    <label class="label" for="Nature-sounds">1</label>
  </li>
</ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.