我怎样才能避免单选按钮后换行,只用它的标签而不是单独地换行
How can i avoid line break after radiobutton, make going it to a new line only with it's label, not separately
我有这样的代码:
<div class="days" style="width:300px;">
<input id="monday" type="radio" name="monday" value="1">
<label for="monday"> monday</label>
<input id="tuesday" type="radio" name="tuesday" value="2">
<label for="tuesday"> tuesday</label>
<input id="wednesday" type="radio" name="wednesday" value="3">
<label for="wednesday"> wednesday</label>
<input id="thursday" type="radio" name="thursday" value="4">
<label for="thursday"> thursday</label>
</div>
这是 jsfiddle - https://jsfiddle.net/k96x02qL/
因此,正如您所见,对于主要 div 的某些宽度值,有时会出现这样的情况,标签在新行上,但单选按钮不在(图一):
picture one
所以我想看到这样的东西(主宽度的任意值 div)(图二):
picture two
我该如何实施?出于某种原因,我无法将输入和它的标签包装在一个 div 中。只能使用“名称”html 属性或类似这样的东西添加一些样式...
您可以使用嵌套 label/component 将无线电组件构建为单个框,然后添加 flex 布局以设置主容器的样式(div
和 class .days
) with flex-wrap: wrap
css 属性 当内容大于容器时自动添加换行符 width
:
.days {
display:flex;
flex-wrap: wrap;
}
<div class="days" style="width:300px;">
<label for="monday">
<input id="monday" type="radio" name="monday" value="1"> monday
</label>
<label for="tuesday">
<input id="tuesday" type="radio" name="tuesday" value="2"> tuesday
</label>
<label for="wednesday">
<input id="wednesday" type="radio" name="wednesday" value="3"> wednesday
</label>
<label for="thursday">
<input id="thursday" type="radio" name="thursday" value="4"> thursday
</label>
</div>
<br/>
Variant for your case:
<div class="days" style="width:300px;">
<div>
<input id="monday" type="radio" name="monday" value="1">
<label for="monday"> monday</label>
</div>
<div>
<input id="tuesday" type="radio" name="tuesday" value="2">
<label for="tuesday"> tuesday</label>
</div>
<div>
<input id="wednesday" type="radio" name="wednesday" value="3">
<label for="wednesday"> wednesday</label>
</div>
<div>
<input id="thursday" type="radio" name="thursday" value="4">
<label for="thursday"> thursday</label>
</div>
</div>
您可以在不更改 HTML 的情况下执行此操作,方法是不显示输入按钮(不透明度:0)并在每个标签前的伪元素中放置一个 'pretend' 按钮。
此代码段使用几个 Unicode 圆圈来执行此操作,但当然您可能想以其他方式执行此操作 - 例如背景无线电渐变或图像。
这样,如果行尾没有空间,标签将作为一个整体穿过。
input {
opacity: 0;
position: absolute;
left: 50px
}
input:checked+label::before {
content: 'ab';
}
label {
position: relative;
}
label::before {
content: 'aa';
margin-right: 5px;
position: relative;
}
<div class="days" style="width:300px;">
<input id="monday" type="radio" name="monday" value="1">
<label for="monday"> monday</label>
<input id="tuesday" type="radio" name="tuesday" value="2">
<label for="tuesday"> tuesday</label>
<input id="wednesday" type="radio" name="wednesday" value="3">
<label for="wednesday"> wednesday</label>
<input id="thursday" type="radio" name="thursday" value="4">
<label for="thursday"> thursday</label>
</div>