Блог

Главная - Вопросы по программированию - отображать флажки в формате grid

отображать флажки в формате grid

#html #css #angularjs

#HTML #css #angularjs

Вопрос:

Я хочу отображать флажки в формате сетки, имеющие 3 столбца. Что-то вроде приведенного ниже

Элемент1 Элемент2 Элемент3
Элемент5 Элемент6
4
Элемент7 Элемент8 Элемент9

Я могу отобразить его в формате сетки с помощью приведенного ниже кода, но в случае Item7 вместо правильного позиционирования он начинает отображать его ниже Item5. Чего я не хочу.

Ниже приведен код, который я использую

 <div class="row" style="margin-top: 15px; padding-bottom: 15px; margin-left: 5px">
 <div class="col-md-4 ef-batch-options-text checkbox" ng-repeat="x in samples">
       <input type="checkbox" id="user" name="users" value="{{x}}"  />
             {{x}}
 </div>

Я также попытался заменить div на ul и Пожалуйста, дайте мне знать, чего мне не хватает.

Ответ №1:

 form {
  width: 60px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}  
 <form>
  <label>
    <input type="checkbox" value=""/>item1
  </label>
  <label>
    <input type="checkbox" value=""/>item2
  </label>
  <label>
    <input type="checkbox" value=""/>item3
  </label>
  <label>
    <input type="checkbox" value=""/>item4
  </label>
  <label>
    <input type="checkbox" value=""/>item5
  </label>
  <label>
    <input type="checkbox" value=""/>item6
  </label>
  <label>
    <input type="checkbox" value=""/>item7
  </label>
  <label>
    <input type="checkbox" value=""/>item8
  </label>
  <label>
    <input type="checkbox" value=""/>item9
  </label>
</form>

Ответ №2:

Вы можете использовать flexbox Обратите внимание, что вам следует избегать использования встроенных стилей! Создайте style.css файл, свяжите его с <link rel="stylesheet" href="style.css"> и вставьте в следующий код:

 .row {
margin-top: 15px;
padding-bottom: 15px;
margin-left: 5px
display: flex;
flex-wrap: wrap;
flex-basis: 33%;
}

Комментарии:

1. Но как это будет работать, если у меня будет больше элементов? Количество элементов может быть любым. Есть ли какое-либо решение для этого?

2. Если бы у вас могло быть любое количество элементов и вы хотели бы, чтобы они были шириной 3, я думаю, flexbox был бы вашим лучшим вариантом

3. спасибо, что это сделало свою работу, но поскольку у меня эти флажки расположены в виде аккордеона и будут отображаться только после свертывания. Когда я добавляю этот CSS, аккордеон, размещенный под этим, не перемещается вниз.

4. вы могли бы попробовать flex-basis: 33% для каждого флажка

Ответ №3:

Попробуйте метод Bootstrap grid,

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item1
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item2
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item3
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item4
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item5
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item6
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item7
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item8
 </div>
  <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item9
 </div>
</div>