<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/