javascript - 如何将动画 list 按钮放置在文本右侧

Question

我正在使用我发现的模板表单，它为我提供了一个简洁的 list 表单，我可以将其用于我正在尝试开发的网站(我这样做是为了学习)所以我想知道如何制作这些按钮:

出现在文字的右边(我想用RTL语言)

为了让它更容易，这里是 fiddle :

https://jsfiddle.net/h1jokddo/

我尝试修改 css 代码，为某些属性添加“margin: right”，但没有成功:

    body {
  background: #069ffb;
  color: #fff;
}

.ac-custom {
  padding: 0 3em;
  max-width: 900px;
  margin: 0 auto;
}

.ac-custom ul,
.ac-custom ol {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
}

.ac-custom li {
  margin: 0 auto;
  padding: 2em 0;
  position: relative;
}

.ac-custom label {
  display: inline-block;
  position: relative;
  font-size: 2em;
  padding: 0 0 0 80px;
  vertical-align: top;
  color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.ac-custom input[type="checkbox"],
.ac-custom label::before {
  width: 50px;
  height: 50px;
  top: 50%;
  left: 0;
  margin-top: -25px;
  position: absolute;
  cursor: pointer;
}

.ac-custom input[type="checkbox"] {
  opacity: 0;
  -webkit-appearance: none;
  display: inline-block;
  vertical-align: middle;
  z-index: 100;
}

.ac-custom label::before {
  content: '';
  border: 4px solid #fff;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ac-radio label::before {
  border-radius: 50%;
}

.ac-custom input[type="checkbox"]:checked + label {
  color: #fff;
}

.ac-custom input[type="checkbox"]:checked + label::before {
  opacity: 0.8;
}


/* General SVG and path styles */

.ac-custom svg {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  margin-top: -20px;
  left: 5px;
  pointer-events: none;
}

.ac-custom svg path {
  stroke: #fdfcd3;
  stroke-width: 13px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}


/* Box Fill */

.ac-boxfill svg path {
  stroke-width: 8px;
}

我需要知道在那里要改变什么。正如我之前所说，这是我正在做的事情，目的是学习，这至少是我学习的方式，我采用已经有效的方法，并尝试找出是什么让一切正常。

Answer 1

从标签中删除 padding 并将所需数量的像素添加到 css 中复选框的 left。还要在 svg 左侧添加像素数量像这样:

.ac-custom label {
  display: inline-block;
  position: relative;
  font-size: 2em;
  padding: 0 0 0 0px;
  vertical-align: top;
  color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.ac-custom input[type="checkbox"],
.ac-custom label::before {
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50px;
  margin-top: -25px;
  position: absolute;
  cursor: pointer;
}

.ac-custom svg {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  margin-top: -20px;
  left: 55px;
  pointer-events: none;
}

参见 fiddle