<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;
}


而已。

最佳答案

使用<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>

关于html - 无法将单选按钮与标签分开,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48616529/

10-11 23:15
查看更多