我必须建立一个表单，在文本（文本标签）的右侧具有无线电类型输入，而不改变输入标签和标签标签的顺序。
由于 ID 的输入和标签被动态设置，也许由于这个原因改变顺序不工作，而不是单选按钮消失。
是我写的代码和所需结果的图像。
我的代码结果：
的代码（这是一个 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>
和我想要的风格
我也尝试在 label-tag 之后写入输入 [type“radio”]，但它仍然没有发生。我也尝试应用float:rightcss 来输入 [type =“radio]，但它也不工作。
1
对于原子的子元素，类options会更好，因为单数option和option-*。
您可以使用<label>作为包装器，因此无需使用for和id属性
不要使用内联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（如果在grid或flex上下文中）
.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;">
</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;">
</div>
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（51条）