如何用CSS将Qualtrics中的Withdraw按钮左对齐避免误触？

嘿，我明白你现在的困扰——刚加的Withdraw按钮和Next挤在一起太容易点错了。别担心，咱们通过给按钮加专属CSS类+自定义样式就能轻松解决左对齐的问题，还能顺便优化按钮辨识度减少误触。

第一步：修改插入按钮的JS代码，给按钮加专属类 #

首先得给你的退出按钮加个唯一的CSS类，这样后续CSS才能精准定位它。你现有的代码可以改成这样：

var inject_me = function() {
  // 等待Next按钮加载完成
  if (!$("#NextButton").length) {
    window.requestAnimationFrame(inject_me); // 注意这里别加括号，不然会直接执行导致死循环
    return;
  }

  // 创建退出按钮，加上自定义类名qualtrics-withdraw-btn
  const withdrawBtn = $('<button type="button" class="qualtrics-withdraw-btn">Withdraw</button>');

  // 绑定退出逻辑（这里你可以换成自己的退出处理，比如跳转到说明页或者标记退出状态）
  withdrawBtn.on('click', function() {
    // 举个例子：标记参与者为已退出，然后跳转到最后一页
    Qualtrics.SurveyEngine.setEmbeddedData("HasWithdrawn", "Yes");
    Qualtrics.SurveyEngine.gotoPage(Qualtrics.SurveyEngine.getLastPageNum());
    // 如果要直接关闭窗口可以用 window.close(); 但部分浏览器会限制这个操作
  });

  // 把退出按钮插到Next按钮的父容器最前面
  $("#NextButton").parent().prepend(withdrawBtn);
};
inject_me();

第二步：添加CSS实现左对齐+优化样式 #

接下来去Qualtrics的Look & Feel → Style → Custom CSS里添加这段样式：

/* 让退出按钮左对齐，和Next按钮拉开间距 */
.qualtrics-withdraw-btn {
  float: left;
  margin-right: 15px; /* 这个值可以自己调，觉得间距不够就改大 */
  /* 顺便给退出按钮上个醒目的颜色，避免误点 */
  background-color: #dc3545;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 18px;
  cursor: pointer;
}

/* 鼠标悬停时加深颜色，提升交互感 */
.qualtrics-withdraw-btn:hover {
  background-color: #c82333;
}

/* 确保按钮容器能容纳浮动元素，避免布局混乱 */
.Skin #Buttons {
  overflow: hidden;
}

为啥这么做？ #

• 给按钮加专属类qualtrics-withdraw-btn，不会影响Qualtrics自带的其他按钮样式；
• float: left直接让按钮靠左对齐，和右边的Next按钮彻底分开；
• 给退出按钮用红色（或者你觉得醒目的颜色），能让参与者一眼区分“退出”和“继续”，进一步降低误触概率。

如果你的按钮是插在其他容器里，只需要调整CSS选择器对应上你的按钮元素就行，灵活得很～

内容的提问来源于stack exchange，提问作者Melinda