我怎样才能避免单选按钮后换行，只用它的标签而不是单独地换行

Question

我有这样的代码：

<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 属性或类似这样的东西添加一些样式...

Answer 1

您可以使用嵌套 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>

Answer 2

您可以在不更改 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>

我怎样才能避免单选按钮后换行，只用它的标签而不是单独地换行

How can i avoid line break after radiobutton, make going it to a new line only with it's label, not separately

html

css

line-breaks