css - 如何使用自定义 CSS 减少 Qualtrics 中单选按钮之间的距离

标签 css qualtrics

<分区>

我正在尝试进行一项将在手机上回答的质量调查。我包括几个使用(水平)多项选择单选答案单选按钮的调查,例如仅使用这些 anchor ,从完全没有到非常有 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; }

最佳答案

When the survey is taken on a mobile device, these questions get changed to a vertical format, however then the distance between each point is very large [...]

How could I reduce the size between those radio buttons?

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

  • 高度
  • 行高
  • 边距
  • margin-top
  • margin-bottom
  • 填充
  • padding-top
  • 填充底部

您将需要编辑其中的一项或多项。

关于css - 如何使用自定义 CSS 减少 Qualtrics 中单选按钮之间的距离,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49408766/

相关文章:

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

css - 左右 DIV 不会自动调整到容器的高度

javascript - 如何在 CSS 中检查条件?

HTML & CSS : Align text line to bottom center of div

javascript - 使文本/答案选择在 qualtrics 中消失/重新出现

javascript - 使用 javascript 生成在 Qualtrics 中的调查之间不会重复的随机数

javascript - 如何打印 HTML 页面中的特定部分 Angular JS

html - 为什么单击按钮时我的导航栏没有展开?

javascript - 不同步文本框的输入

javascript - 过早退出 Qualtrics 中的循环和合并 block