添加CSS代码以增加标签和单选按钮之间的空间

Question

我需要增加标签（与我调整大小的单选按钮重叠）和单选按钮之间的距离。我找到的代码片段只针对按钮左侧或右侧的标签。我的标签位于单选按钮之上，现在两个线条标签（比如“既不喜欢也不喜欢”，横跨两条线）被单选按钮重叠。谢谢！

a screenshot of my radio buttons

Answer 1

jsfiddle

由于我不知道，如果你使用的引导或任何其他布局框架，这里是一个简单的表格布局的解决方案。

td { 
    width:100px; 
    text-align: center; 
} 

<!--EMMET string table>(tr>(td>label[for=radio$]{myradio$})*5)+(tr>(td>input#radio$[type='radio'][name=myradio])*5)--> 
<table> 
<tr> 
    <td><label for="radio1">myradio1</label></td> 
    <td><label for="radio2">myradio2</label></td> 
    <td><label for="radio3">myradio3</label></td> 
    <td><label for="radio4">myradio4</label></td> 
    <td><label for="radio5">myradio5</label></td> 
</tr> 
<tr> 
    <td><input type="radio" id="radio1" name="myradio"></td> 
    <td><input type="radio" id="radio2" name="myradio"></td> 
    <td><input type="radio" id="radio3" name="myradio"></td> 
    <td><input type="radio" id="radio4" name="myradio"></td> 
    <td><input type="radio" id="radio5" name="myradio"></td> 
</tr> 

Answer 2

这个JavaScript添加到您的Qualtrics问题：

Qualtrics.SurveyEngine.addOnload(function() 
{ 
    var qid = this.questionId; 
    var radioCells = $(qid).select('td.ControlContainer'); 
    var limit = radioCells.length; 
    for(i=0;i<limit;i++) { 
     radioCells[i].style.paddingTop = "25px"; 
    } 
}); 

调整 “25像素” 是必要的。您应该考虑升级到新的Qualtrics主题，其中单选按钮消失，标签变成可点击的按钮。