将单选类型输入移动到标签右侧(moveradio)

我必须建立一个表单,在文本(文本标签)的右侧具有无线电类型输入,而不改变输入标签和标签标签的顺序。

我必须建立一个表单,在文本(文本标签)的右侧具有无线电类型输入,而不改变输入标签和标签标签的顺序。

由于 ID 的输入和标签被动态设置,也许由于这个原因改变顺序不工作,而不是单选按钮消失。

是我写的代码和所需结果的图像。

我的代码结果:

image of code output

的代码(这是一个 Ruby on Rails 语法):

<div class="options">
  <input type="radio" id="<%=qid%>op1" name="<%=qid%>" value="<%= @questions[qid]["option1"] %>">
    <label class="option-value" for="<%=qid%>op1">A. <%= @questions[qid]["option1"] %></label>
  </div>

和我想要的风格

desired outcome

我也尝试在 label-tag 之后写入输入 [type“radio”],但它仍然没有发生。我也尝试应用float:rightcss 来输入 [type =“radio],但它也不工作。

1

对于原子的子元素,类options会更好,因为单数optionoption-*

您可以使用<label>作为包装器,因此无需使用forid属性

不要使用内联style

在父标签上使用 displayflex

SPAN上使用margin-right: auto将其与INPUT元素隔开

.option {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 0.3rem;
  font-size: 1.2rem;
  padding: 1rem;
}
.option-value {
  margin-right: auto;
}
<label class="option">
  <span class="option-value">B. Owners</span>
  <input class="option-input" type="radio" name="Q2" value="Owners">
</label>

提示:
当需要直观地更改标记顺序时,请使用CSS order(如果在gridflex上下文中)

.option {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 0.3rem;
  font-size: 1.2rem;
  padding: 1rem;
}
.option-value {
  margin-right: auto;
  order: -1;
}
<label class="option">
  <input class="option-input" type="radio" name="Q2" value="Owners">
  <span class="option-value">B. Owners</span>
</label>
1

您需要在 HTML 中输入之前放置标签

 <div class="options" style="user-select: auto;">
    <label class="option-value" for="Q2op2" style="user-select: auto;">B. Owners</label>
    <br style="user-select: auto;">
    <input type="radio" id="Q2op2" name="Q2" value="Owners" style="user-select: auto;">&nbsp;
  </div>

并添加一些 CSS

.options{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
1

始终按照要查看的顺序放置标签。由于您需要文本首先出现在此处,请先放置输入标签,然后放置单选按钮。由于您需要两个组件之间的间距,请使 div 容器弯曲并均匀间隔。

<div class="options" style="user-select: auto;" style="display: flex; justify-content: space-evenly;">
    <label class="option-value" for="Q2op2" style="user-select: auto;">B. Owners</label>      
    <input type="radio" id="Q2op2" name="Q2" value="Owners" style="user-select: auto;">&nbsp;
</div>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(321)
UPS的访问许可证编号
上一篇
非贪婪正则表达式根据原子在正则表达式中的位置表现贪婪(non atoms)
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(26条)