Question

我正在使用我发现的模板表格，它给了我一个整洁的清单表格，我可以用于我试图开发的网站（我这样做是为了学习）所以我想知道如何制作这些按钮：

出现在文本的右侧（我想使用RTL语言）

为了更容易，这里是小提琴：

我尝试修改css代码，添加＆＃34; margin：right＆＃34;一些属性，但没有运气：

    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

Answer 2

在css的末尾添加以下代码

.ac-custom label {
  padding: 0;
}
.ac-custom input[type="checkbox"], .ac-custom label::before {
    left: 40px;
}
.ac-custom svg {    
    top: 54%;
    left: 49px;
}

更新：https://jsfiddle.net/arifahmedjoy/h1jokddo/7/

如何将动画清单按钮放到文本右侧

2 个答案: