1. 首页
  2. 问题列表
  3. 将单选框放置在其标签的左侧
提问者：小点点

将单选框放置在其标签的左侧


我想把收音机盒放在每个标签的右边：

null

.choices .choices-list {
  list-style: none;
}
.choices .item:nth-of-type(n + 2) {
  margin-top: 10px;
}
.choices .checkbox,
.choices .radio {
  position: absolute;
  opacity: 0;
}
.choices .checkbox + label,
.choices .radio + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  user-select: none;
  font-size: 0.875rem;
  text-transform: capitalize;
  font-weight: 600;
  color: #212121;
  transition: color 0.15s ease;
}
.choices .checkbox + label::before,
.choices .radio + label::before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #dddd;
  transition: background 0.2s ease, box-shadow 0.2s ease, border 0.1s ease-in;
}
.choices .checkbox:hover + label::before,
.choices .radio:hover + label::before {
  background: #f5f5f5;
  box-shadow: 0 0 0 3px rgba(117, 121, 231, 0.4);
}
.choices .checkbox:hover + label,
.choices .radio:hover + label {
  color: black;
}
.choices .checkbox + label {
  padding-left: 30px;
}
.choices .checkbox + label::before {
  width: 20px;
  height: 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.choices .checkbox + label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 20px;
  height: 20px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAvklEQVRIS+2U0Q3CMAwFzxuwCYwAEzECdAM2ghHoJmxgZJRIUWgTh9C/9Du9q59fKmz8yMZ8hqCa8IjoE5Gq7oCziEx5Zt0RBfgdOACTiFxTSZcgg8/AUURefxF44Cb6aQIvvChQVcvylo/cAl8VBPgFeAKnKGmFlwRWuwewj5KwuNiWxYUuXevVHYSvTSX2vlXRDa8uOZPY+SZ4VZDcUpvEnq+e1/52rpqGScgbVYO7JvBASmdcE/RIhqCa3ht9IVAZxGa2wAAAAABJRU5ErkJggg==");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border-radius: 2px;
  transition: transform 0.1s ease-in;
}
.choices .checkbox:checked + label::before {
  border-color: #7579e7;
  background: #7579e7;
}
.choices .checkbox:checked + label::after {
  transform: translateY(-50%) scale(1);
  transition: transform 0.2s ease-out;
  opacity: 1;
}

.choices .radio + label {
  padding-left: 32px;
}
.choices .radio + label::before {
  width: 22px;
  height: 22px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border-width: 0;
  border-style: solid;
  border-color: #7579e7;
}
.choices .radio:checked + label::before {
  background: #ffffff;
  border-color: #7579e7;
  border-width: 7px;
  transition: background 0.2s ease, border 0.3s ease-out;
}
<div class="multiple-choice">

    <h1 class="question">سوال در اینجا رار می گیرد؟</h1>

    <form class="choices">
      <ul class="choices-list">
         <li class="item">
            <label for="children">children</label>
            <input type="radio" name="age" class="radio" id="children">
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="teen">
            <label for="teen">teen</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="adult">
            <label for="adult">adult</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="aduflt">
            <label for="aduflt">adult</label>
         </li>
      </ul>
    </form>

  </div>

null

我试着把标签放在输入标签之前来实现这一点，但是单选框消失了！！！

我该怎么解决这个？


共2个答案

匿名用户

它已经在使用绝对定位...所以用右替换它的左属性。如果希望它们对齐，可以使用flexbox行或在容器上设置relative。

null

.choices .choices-list {
  list-style: none;
}
.choices .item:nth-of-type(n + 2) {
  margin-top: 10px;
}
.choices .checkbox,
.choices .radio {
  position: absolute;
  opacity: 0;
}
.choices .checkbox + label,
.choices .radio + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  user-select: none;
  font-size: 0.875rem;
  text-transform: capitalize;
  font-weight: 600;
  color: #212121;
  transition: color 0.15s ease;
}
.choices .checkbox + label::before,
.choices .radio + label::before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(35px, -50%);
  background: #dddd;
  transition: background 0.2s ease, box-shadow 0.2s ease, border 0.1s ease-in;
}
.choices .checkbox:hover + label::before,
.choices .radio:hover + label::before {
  background: #f5f5f5;
  box-shadow: 0 0 0 3px rgba(117, 121, 231, 0.4);
}
.choices .checkbox:hover + label,
.choices .radio:hover + label {
  color: black;
}
.choices .checkbox + label {
  padding-left: 30px;
}
.choices .checkbox + label::before {
  width: 20px;
  height: 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.choices .checkbox + label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 20px;
  height: 20px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAvklEQVRIS+2U0Q3CMAwFzxuwCYwAEzECdAM2ghHoJmxgZJRIUWgTh9C/9Du9q59fKmz8yMZ8hqCa8IjoE5Gq7oCziEx5Zt0RBfgdOACTiFxTSZcgg8/AUURefxF44Cb6aQIvvChQVcvylo/cAl8VBPgFeAKnKGmFlwRWuwewj5KwuNiWxYUuXevVHYSvTSX2vlXRDa8uOZPY+SZ4VZDcUpvEnq+e1/52rpqGScgbVYO7JvBASmdcE/RIhqCa3ht9IVAZxGa2wAAAAABJRU5ErkJggg==");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border-radius: 2px;
  transition: transform 0.1s ease-in;
}
.choices .checkbox:checked + label::before {
  border-color: #7579e7;
  background: #7579e7;
}
.choices .checkbox:checked + label::after {
  transform: translateY(-50%) scale(1);
  transition: transform 0.2s ease-out;
  opacity: 1;
}

.choices .radio + label {
  padding-left: 32px;
}
.choices .radio + label::before {
  width: 22px;
  height: 22px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border-width: 0;
  border-style: solid;
  border-color: #7579e7;
}
.choices .radio:checked + label::before {
  background: #ffffff;
  border-color: #7579e7;
  border-width: 7px;
  transition: background 0.2s ease, border 0.3s ease-out;
}
<div class="multiple-choice">

    <h1 class="question">سوال در اینجا رار می گیرد؟</h1>

    <form class="choices">
      <ul class="choices-list">
         <li class="item">
            <label for="children">children</label>
            <input type="radio" name="age" class="radio" id="children">
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="teen">
            <label for="teen">teen</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="adult">
            <label for="adult">adult</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="aduflt">
            <label for="aduflt">adult</label>
         </li>
      </ul>
    </form>

  </div>

匿名用户

若要将它们全部对齐到相同的数量，请使用left:。

null

.choices .choices-list {
  list-style: none;
}
.choices .item:nth-of-type(n + 2) {
  margin-top: 10px;
}
.choices .checkbox,
.choices .radio {
  position: absolute;
  opacity: 0;
}
.choices .checkbox + label,
.choices .radio + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  user-select: none;
  font-size: 0.875rem;
  text-transform: capitalize;
  font-weight: 600;
  color: #212121;
  transition: color 0.15s ease;
}
.choices .checkbox + label::before,
.choices .radio + label::before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translate(35px, -50%);
  background: #dddd;
  transition: background 0.2s ease, box-shadow 0.2s ease, border 0.1s ease-in;
}
.choices .checkbox:hover + label::before,
.choices .radio:hover + label::before {
  background: #f5f5f5;
  box-shadow: 0 0 0 3px rgba(117, 121, 231, 0.4);
}
.choices .checkbox:hover + label,
.choices .radio:hover + label {
  color: black;
}
.choices .checkbox + label {
  padding-left: 30px;
}
.choices .checkbox + label::before {
  width: 20px;
  height: 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.choices .checkbox + label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 20px;
  height: 20px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAvklEQVRIS+2U0Q3CMAwFzxuwCYwAEzECdAM2ghHoJmxgZJRIUWgTh9C/9Du9q59fKmz8yMZ8hqCa8IjoE5Gq7oCziEx5Zt0RBfgdOACTiFxTSZcgg8/AUURefxF44Cb6aQIvvChQVcvylo/cAl8VBPgFeAKnKGmFlwRWuwewj5KwuNiWxYUuXevVHYSvTSX2vlXRDa8uOZPY+SZ4VZDcUpvEnq+e1/52rpqGScgbVYO7JvBASmdcE/RIhqCa3ht9IVAZxGa2wAAAAABJRU5ErkJggg==");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border-radius: 2px;
  transition: transform 0.1s ease-in;
}
.choices .checkbox:checked + label::before {
  border-color: #7579e7;
  background: #7579e7;
}
.choices .checkbox:checked + label::after {
  transform: translateY(-50%) scale(1);
  transition: transform 0.2s ease-out;
  opacity: 1;
}

.choices .radio + label {
  padding-left: 32px;
}
.choices .radio + label::before {
  width: 22px;
  height: 22px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border-width: 0;
  border-style: solid;
  border-color: #7579e7;
}
.choices .radio:checked + label::before {
  background: #ffffff;
  border-color: #7579e7;
  border-width: 7px;
  transition: background 0.2s ease, border 0.3s ease-out;
}
<div class="multiple-choice">

    <h1 class="question">سوال در اینجا رار می گیرد؟</h1>

    <form class="choices">
      <ul class="choices-list">
         <li class="item">
            <input type="radio" name="age" class="radio" id="children">
            <label for="children">children</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="teen">
            <label for="teen">teen</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="adult">
            <label for="adult">adult</label>
         </li>
         <li class="item">
            <input type="radio" name="age" class="radio" id="aduflt">
            <label for="aduflt">adult</label>
         </li>
      </ul>
    </form>

  </div>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS