Как я могу добавить поля для метки для флажка в CSS, где флажок скрыт?

Question

У меня есть длинный список флажков в HTML, например:

<input id='1' class="tag-checkbox" type="checkbox"'><label for='1'>Checkbox 1</label>
<input id='2' class="tag-checkbox" type="checkbox"'><label for='2'>Checkbox 2</label>
<input id='3' class="tag-checkbox" type="checkbox"'><label for='3'>Checkbox 3</label>

et c.

У меня также есть CSS, который стилизует ярлыки, скрывает фактические флажки и ярлыки ссылок и флажки, так что при нажатии на ярлык будет установлен флажок.

    input[type=checkbox].tag-checkbox{
        display: none;
    }
    input[type=checkbox]:checked + label{
        background-color: rgb(0, 48, 85);
        color: white;
    }
    label{
         padding: 5px 7px;

         border-radius: 10px;
         background-color: rgb(191, 203, 213);
         
         cursor: pointer;
     }

Поскольку у меня их так много, я показываю их по горизонтали. Однако, когда они попадают на следующую строку, цвета фона меток перекрываются. Независимо от того, где я его поместил в CSS, я не могу установить вертикальные поля для меток. У других вопросов есть решение для флажков, но у меня они скрыты.

Вот оно в JSFiddle: https://jsfiddle.net/dkprqu3b

Answer 1

Просто добавьте display: inline-block к своим ярлыкам. Таким образом, они будут вести себя больше как блоки, а не строки текста.

Answer 2

Для решения вашей проблемы достаточно использовать flex с правилом flex-wrap: wrap.

input[type=checkbox].tag-checkbox{
  display: none;
}
input[type=checkbox]:checked + label{
  background-color: rgb(0, 48, 85);
  color: white;
}
label{
  padding: 5px 7px;

  border-radius: 10px;
  background-color: rgb(191, 203, 213);

  cursor: pointer;
  margin: 5px;
}

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

<div class="checkbox_content">
  <input id='1' class="tag-checkbox" type="checkbox"'><label for='1'>Checkbox 1</label>
  <input id='2' class="tag-checkbox" type="checkbox"'><label for='2'>Checkbox 2</label>
  <input id='3' class="tag-checkbox" type="checkbox"'><label for='3'>Checkbox 3</label>
  <input id='4' class="tag-checkbox" type="checkbox"'><label for='4'>Checkbox 4</label>
  <input id='5' class="tag-checkbox" type="checkbox"'><label for='5'>Checkbox 5</label>
  <input id='6' class="tag-checkbox" type="checkbox"'><label for='6'>Checkbox 6</label>
</div>