Проблема с выравниванием флажков при установке флажка — HTML / CSS

#html #css #angular #bootstrap-4 #alignment

#HTML #css #угловой #bootstrap-4 #выравнивание

Вопрос:

Когда флажки не установлены, выравнивание выполняется по прямой линии.Но, если флажок установлен, поле перемещается влево. Я хочу, чтобы флажки были выровнены по прямой линии, независимо от того, установлен флажок или нет. Пожалуйста, укажите исправление этой проблемы.

 [Image- Checkbox moves when checked][1] input[type=checkbox][_ngcontent-c13],
.tbl-chkBx[_ngcontent-c13] {
  height: auto;
  width: auto;
  margin-top: auto;
  vertical-align: initial;
  text-align: center;
}  
 <td _ngcontent-c13="" class="tbl-chkBx">

  <input _ngcontent-c13="" class="form-check-input position-static ng-untouched ng-valid" formcontrolname="isSelected" type="checkbox" ng-reflect-name="isSelected">

</td>  

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

Ответ №1:

Определенно существует проблема, связанная с шириной и высотой элементов. Это должно исправить это:

 input[type="checkbox"] { 
  margin-right: 5px;
  display: inline-block; 
  border: 1px solid black; 
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -o-transform: scale(1.4);
  transform: scale(1.4);
}