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>

Answer 2

没有必要提供position:absolute输入。如果您不想在标签中添加padding-left，请从标签中删除绝对删除padding-left。

＆＃13;

#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;
}

#quiz{
width:75%;
height:auto;
margin-top:15px;
text-align:left;
padding:0px 50px 0px 50px;
margin-bottom:20px;}

＆＃13;

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

＆＃13;

Answer 3

使用position：relative而不是绝对

＆＃13;

#option input{
  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;
  position: relative;
}

＆＃13;

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

＆＃13;

Answer 4

通常使用CSS的情况是尝试过多。在这种情况下，请从position:absolute

取消input

当嵌入式样式与CSS混合使用时，通常也会使样式变得更加困难。在这里，我只是将其移动到CSS。

最后，您使用<br>来模拟块显示，因此我们使用css

来执行此操作

＆＃13;

#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;
  display:block;
}

#quiz {
  width: 75%;
  height: auto;
  margin-top: 15px;
  text-align: left;
  padding: 0px 50px 0px 50px;
  margin-bottom: 20px;
}

input {
  margin-top: 0px;
}
.questions{font-size:13pt;margin-left:20px;margin-bottom:10px;}
.question {font-size:17pt;font-weight:normal;}
.img-responsive{height:30%;width:30%;padding-left:20px;border-radius: 0;}
.form-container{font-weight:normal;font-size:15pt;margin-left:20px;}

＆＃13;

<div class="questions" >
  <p class="question" id="ques{{i+1}}">{{i+1+". "+a.question}}</p>
  <img *ngIf="isImage[i]" [src]="a.image" class="img-responsive" >
</div>
<div class="form-container">
  <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>
    <label id="label_2_{{i}}"><input id="2_{{i}}" type="radio"  name="q{{i}}" value="{{a.option2}}"> B)  {{a.option2}}</label>
    <label id="label_3_{{i}}"><input id="3_{{i}}" type="radio"  name="q{{i}}" value="{{a.option3}}"> C)  {{a.option3}}</label>
    <label id="label_4_{{i}}"><input id="4_{{i}}" type="radio"  name="q{{i}}" value="{{a.option4}}"> D)  {{a.option4}}</label>
  </form>
</div>

＆＃13;

无法将标签上的单选按钮分开

4 个答案: