问题：

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

经正祥

2023-03-14

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

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个答案

宋康安

2023-03-14

若要将它们全部对齐到相同的数量，请使用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>

王凯旋

2023-03-14

它已经在使用绝对定位...所以用右替换它的左属性。如果希望它们对齐，可以使用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;
}

html prettyprint-override"><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>

类似资料：

日期选择器图标放置在输入字段的左侧

我想把左侧的日历图标放在框上，而不是右边，默认情况下是在那里。有人能帮我一下吗？我使用了“正常”的角度datepicker，如下所示：我希望它看起来更像这样:https://i.stack.imgur.com/edru5.png 提前致谢！！！
是否将引导标签置于复选框之下？

如何将引导标签放在复选框下面？ null null 我得到这个结果但我想要这个结果如果我首先添加更多的我会得到这个（上面更多的空间）
选中时，复选框标签未设置样式

我试图创建一个复选框标签，其中复选框本身是隐藏的，但标签没有因此点击标签，选中复选框，即使没有显示。我想做的是，当它被选中时，标签保持红色，为此我为复选框活动指定了一个类，但它不起作用。它可以在悬停状态下正常工作，但不能在活动状态下正常工作。当我单击它时，复选框会选中，但标签不会读取活动类。有什么想法吗？我使用以下html：还有下面的css
将Hibernate配置放在其他位置

问题内容： Hibernate配置文件（.hbm.xml）的理想位置是但我想将这些配置设置放在其他位置，例如我怎样才能做到这一点？如果我将配置文件放在该位置，并且启动了Tomcat，则在加载该配置时会出现错误提示找不到hibernate.cfg.xml 问题答案：要配置文件的位置，请使用而不是在创建时。要配置文件的位置，请使用。也可以看看： Java文档
如何在表格单元格中居中放置复选框？

问题内容：该单元格仅包含一个复选框。由于表标题行中的文本，所以它很宽。如何将复选框居中（在HTML中包含内联CSS？（我知道））我试过了但这没用。我究竟做错了什么？更新：这是一个测试页。有人可以更正它吗（在HTML中使用CSS内联），以使复选框位于其列的中心？我已经接受@Hristo的回答-这就是内联格式… 问题答案：更新 HTML CSS 我希望这有帮助。
选中的单选按钮标签的CSS选择器

问题内容：是否可以将css（3）样式应用于选中的单选按钮的标签？我有以下标记：我希望的是会做某事，但是可惜它没有（我预期的那样）。是否有一个选择器可以实现这种功能？如果有帮助，您可以将divs围起来，但是最好的解决方案是使用标签“ for”属性。应该注意的是，我能够为我的应用程序指定浏览器，所以请最好使用css3等类。问题答案：尝试符号：它是相邻的同级组合器。它结合了两个具有相同父

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

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档