时间戳

首页 > 解决方案 > 复选框在行上对齐

html - 复选框在行上对齐

问题描述

我有多个复选框，每个人都显示在一行中。我想连续有 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;
}

标签： htmlcssangulartypescript

解决方案

根据您的问题，当您尝试对齐容器内的所有复选框时，也许我可以理解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>

推荐阅读