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

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" class 上设置 "margin-left: -15px"（手动对齐数字以适合您的页面）。另一种方法是创建一个 'div' 元素来保存复选框和文本。如果这不起作用然后检查你 CSS 可能 "form-check" 有一些边距或填充属性

Answer 2

您想要将左侧的单选按钮与文本对齐吗？

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

希望能解决你的问题

Answer 3

在你的 CSS 中，我会设置：

.radio {
  margin-left: 0;
}

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

Radio buttons below question not aligned to it

html

radio-group