css - 使用 css 在 Qualtrics 中将 "Withdraw"按钮对齐到左侧

Question

我需要插入一个按钮，让我的参与者可以随时退出我的研究。

我找到了一个 css 代码，可以在每个页面上插入“撤回”按钮。然而，这个“退出”按钮位于“下一步”按钮旁边，我不希望我的参与者误按它并退出调查。 这是我在 Qualtrics 页脚中使用的代码:

var inject_me = function() {
  if (!$("#NextButton").length) {
    window.requestAnimationFrame(inject_me());
  } else {
    var element = document.getElementById('toggle');
    if (typeof(element) != 'undefined' && element != null) {
      document.getElementById('ProgressBar').style.display = "none";
    } else {
      function addParameterToURL(param) {
        _url = location.href;
        _url += (_url.split('?')[1] ? '&' : '?') + param;
        return _url;
      }
      newURL = addParameterToURL("withdraw=true");

      var withdraw = "<a href=\"" + newURL + "\" onclick=\"javascript:return confirm('Are you sure you want to withdraw?')\" class=confirm id='WithdrawLink'><span class='ButtonLeft'></span><span class='WithdrawButton Button' id='WithdrawButton'>WITHDRAW</span><span class='Button' style='float:left !important'></span></a> &nbsp; &nbsp;"
      var buttonsDiv = document.getElementById("Buttons");

      buttonsDiv.innerHTML = withdraw + buttonsDiv.innerHTML;
    }
    if (document.getElementsByClassName("EndOfSurvey").length) {
      document.getElementById('Withdraw').style.display = "none";
      document.getElementById('ProgressBar').style.display = "none";
    }
    if (document.getElementsByClassName("SurveyError").length) {
      document.getElementById('Withdraw').style.display = "none";
    }
  }
};
inject_me();

/* Place your CSS here */

.Skin #Buttons #WithdrawButton {
  border: none;
  color: #fff;
  font-size: 16px;
  padding: 8px 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  margin: 0;
  text-align: center;
  text-decoration: none;
  -webkit-appearance: none;
  transition: background .3s;
  background-color: #900;
  opacity: .25;
}

#WithdrawLink {
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

this is how the page looks with both buttons

Answer 1

使用flexbox方法。我希望下面的代码有效。

.Skin #Buttons #WithdrawButton {
      display: flex;
      justify-content: flex-start;
}