如何使用自定义CSS缩短Qualtrics中单选按钮之间的距离

时间:2018-03-21 14:17:49

标签: css qualtrics

我正在尝试进行质量调查,这些调查将在手机上得到解答。我包括几个使用(水平)多选单答录单选按钮的调查,例如:只有那些锚点才能完全达到7分。

当在移动设备上进行调查时,这些问题会变为垂直格式,然而每个点之间的距离非常大,导致人们不得不滚动查看所有选项。

如何缩小这些单选按钮之间的大小?

我使用以下自定义CSS成功缩短了垂直单选按钮之间的距离:

    /*
    .Skin #SkinContent .MC .SACOL .ChoiceStructure td,
    .Skin #SkinContent .MC .MACOL .ChoiceStructure td,*/
    .Skin #SkinContent .QuestionBody li,
    .Skin #SkinContent .DL td,
    .Skin #SkinContent .SS .QuestionBody,
    .Skin #SkinContent .RO .DND ul.Edited .rank,
    .Skin #SkinContent .RO .DND ul.NotEdited li:hover .rank,
    .Skin #SkinContent .RO .DND .rank,
    .Skin #SkinContent .PGR .DragAndDrop .rank,
    .Skin #SkinContent .MC .MSB .QuestionBody,
    .Skin #SkinContent .MC .SB .QuestionBody,
    .Skin #SkinContent .MC .DL .QuestionBody,
    .Skin #SkinContent .RO .SB .QuestionBody {
    padding:5px;
    }

问题在于我还有其他垂直问题,看起来不太好,按钮之间的空间很小(分类答案而不是刻度)。因此,我更愿意以某种方式更改水平按钮,或者只更改所需的问题。

使用此CSS解决:

   .Skin #skindContent .MC .MAHR .QuestionBody td.LabelContatiner, .Skin .MC
   .SAHR .QuestionBody td.LabelContatiner {
    height: 38px; }

1 个答案:

答案 0 :(得分:1)

  

在移动设备上进行调查时,会出现这些问题   改为垂直格式,然而每个之间的距离   点非常大[...]

     

如何缩小这些单选按钮之间的大小?

在DOM检查器中,检查是否存在以下CSS样式属性的值:

  • height
  • line-height
  • margin
  • margin-top
  • margin-bottom
  • padding
  • padding-top
  • padding-bottom

您需要编辑其中一个或多个。