html - 无法将单选按钮与标签分开

Question

<div class="questions" style="font-size:13pt;margin-left:20px;margin-bottom:10px;">
  <p class="question" id="ques{{i+1}}" style="font-size:17pt;font-weight:normal">{{i+1+". "+a.question}}</p>
  <img *ngIf="isImage[i]" [src]="a.image" class="img-responsive" style="height:30%;width:30%;padding-left:20px;border-radius: 0;">
</div>
<div style="font-weight:normal;font-size:15pt;margin-left:20px">
  <form name="quizform" id="option">
    <label id="label_1_{{i}}"><input id="1_{{i}}" type="radio"  name="q{{i}}" value="{{a.option1}}"> A)  {{a.option1}}</label><br/>
    <!-- [(ngModel)]="ans.answer"   (click)="getAnswer(i,$event.target.value,$event.target.id)"  -->
    <label id="label_2_{{i}}"><input id="2_{{i}}" type="radio"  name="q{{i}}" value="{{a.option2}}"> B)  {{a.option2}}</label><br/>
    <label id="label_3_{{i}}"><input id="3_{{i}}" type="radio"  name="q{{i}}" value="{{a.option3}}"> C)  {{a.option3}}</label><br/>
    <label id="label_4_{{i}}"><input id="4_{{i}}" type="radio"  name="q{{i}}" value="{{a.option4}}"> D)  {{a.option4}}</label><br/><br/>
  </form>
</div>

我想在标签内添加单选按钮，这样每当用户点击标签时，单选按钮就会被选中，但我面对的是 it overlap on label tag 这里我的 css 文件看起来像

#option {
  margin-left: 10px!important;
}

#wrapper {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

label {
  font-size: 16pt;
  font-weight: normal;
  padding-left: 15px;
  margin-top: -10px
}

#quiz {
  width: 75%;
  height: auto;
  margin-top: 15px;
  text-align: left;
  padding: 0px 50px 0px 50px;
  margin-bottom: 20px;
}

input {
  position: absolute;
  margin-top: 0px;
}

就是这样。

Answer 1

使用 <laber for=".."> 更容易并删除 position: absolute;

https://www.w3schools.com/tags/att_label_for.asp

#option {
  margin-left: 10px!important;
}

#wrapper {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

label {
  font-size: 16pt;
  font-weight: normal;
  margin-top: -10px
}

#quiz {
  width: 75%;
  height: auto;
  margin-top: 15px;
  text-align: left;
  padding: 0px 50px 0px 50px;
  margin-bottom: 20px;
}

input {
  margin-top: 0px;
}

<div class="questions" style="font-size:13pt;margin-left:20px;margin-bottom:10px;">
    
              <p class="question" id="ques{{i+1}}" style="font-size:17pt;font-weight:normal">{{i+1+".  "+a.question}}</p>
    
              <img *ngIf="isImage[i]" [src]="a.image" class="img-responsive" style="height:30%;width:30%;padding-left:20px;border-radius: 0;">
            </div>
    
    
         <div style="font-weight:normal;font-size:15pt;margin-left:20px">
           <form name="quizform" id="option">
             <input id="1_{{i}}" type="radio"  name="q{{i}}" value="{{a.option1}}"><label for="1_{{i}}" id="label_1_{{i}}"> A)  {{a.option1}}</label><br/>   <!-- [(ngModel)]="ans.answer"   (click)="getAnswer(i,$event.target.value,$event.target.id)"  -->
             <input id="2_{{i}}" type="radio"  name="q{{i}}" value="{{a.option2}}"><label for="2_{{i}}" id="label_2_{{i}}"> B)  {{a.option2}}</label><br/>
             <input id="3_{{i}}" type="radio"  name="q{{i}}" value="{{a.option3}}"><label for="3_{{i}}" id="label_3_{{i}}"> C)  {{a.option3}}</label><br/>
             <input id="4_{{i}}" type="radio"  name="q{{i}}" value="{{a.option4}}"><label for="4_{{i}}" id="label_4_{{i}}"> D)  {{a.option4}}</label><br/><br/>
           </form>
         </div>