问题下方的单选按钮未对齐

Question

我一直在尝试将单选按钮的位置对准问题的开头，但似乎没有任何作用。

这是我的代码：

<div class="form-row" [style.display]="this.Form.value.joiningAs == '2' || this.Form.value.joiningAs == '3' ? 'block' : 'none'">
  <div class="col-md-12 mb-3">
    <label for="hasProfile">
                            Has your company created their profile on our platform?
                        </label>
    <div class="form-check">
      <label class="form-check-label">
                                <input type="radio" class="radio" name="hasCompanyProfile" value="1" formControlName="hasCompanyProfile"
                                    [(ngModel)]="Form.value.hasCompanyProfile">
                                Yes
                            </label>
    </div>
    <div class="form-check">
      <label class="form-check-label">
                                <input type="radio" class="radio" name="hasCompanyProfile" value="2" formControlName="hasCompanyProfile"
                                    [(ngModel)]="Form.value.hasCompanyProfile">
                                No
                            </label>
    </div>
  </div>
</div>

任何帮助将不胜感激。我在这上面花了太多时间。

Answer 1

一种实现方法是在CSS的“ form-check”类上设置“ margin-left：-15px”（手动对齐数字，使其适合您的页面）。另一种方法是创建一个“ div”元素，该元素同时包含复选框和文本。如果这样不起作用，请检查您的CSS可能“ form-check”具有一些边距或填充属性

Answer 2

所以您想使单选按钮与文本对齐？

.form-check-label > input {
    margin-left: 0;
}

我希望能解决您的问题

Answer 3

在您的CSS中，我将设置：

.radio {
  margin-left: 0;
}