Блог

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

Флажки выровнены по строке

#html #css #angular #typescript

Вопрос:

У меня есть несколько флажков, и все они отображаются в строке. Я хочу, чтобы в строке было 3 или 4 флажка, но я не могу этого сделать. Угловой:

 <div class="form">
     <mat-label>Choose skills:</mat-label>
     <div class="container">
      <div *ngFor="let skill of listOfSkills; index as i" id="skills">
          <input type="checkbox" (change)="getSkill($event,i)">{{skill}}
      </div>   
    </div>
  </div>

CSS:

 .container input[type=checkbox]{
  display:inline-block; 
  width: 200px;
  text-align: center;
}

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

1. Вы можете обернуть флажки в гибкий div с гибким направлением в виде строки. Ссылка: w3schools.com/css/css3_flexbox.asp

Ответ №1:

Основываясь на вашем вопросе, может быть, я смогу понять, как вы пытаетесь выровнять все флажки внутри контейнера div ? Не уверен, что это то, что вы ищете ?

 div{
  display:flex;
  align-items:center;
}

input{
  margin-right:10px;
}
input:last-child{
  margin-right:0px;
} 
 <div>
  <input type="checkbox" />
   <input type="checkbox" />
    <input type="checkbox" />
     <input type="checkbox" />
</div>

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

1. Что-то в этом роде. Спасибо. Мне удалось с: display:grid; grid-template-columns: repeat(3,1fr); max-width: 100%; align-items: stretch;

2. добро пожаловать, можете проголосовать за меня , thx =)

Ответ №2:

Ваш css устанавливает display свойство inline-block на input теге, но окружающий div тег по-прежнему является элементом блока и, следовательно, всегда будет переноситься.

Ваш css должен выглядеть так:

CSS:

 .container .checkbox {
    display:inline-block; 
    width: 200px;
    text-align: center;
}

HTML:

 <div class="form">
    <mat-label>Choose skills:</mat-label>
    <div class="container">
        <div *ngFor="let skill of listOfSkills; index as i" class="checkbox">
            <input type="checkbox" (change)="getSkill($event,i)">{{skill}}
        </div>   
    </div>
</div>

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

1. Все равно не работает. У каждого флажка есть своя строка.

Метки: