如何避免單選按鈕后換行，僅使用 label 將其換行，而不是單獨換行

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的一些寬度值，有時會出現一種情況，當label在新行上，而radiobutton不在時（圖一）：

圖一

所以我想看到這樣的東西（主 div 的任何寬度值）（圖二）：

圖二

我該如何實施？ 出於某種原因，我無法包裝輸入，它是 label 在另一個 div 中。 只能使用“名稱”html 屬性或類似的東西添加一些 styles...

Answer 1

css：

 .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>

Answer 2

您可以在不更改 HTML 的情況下執行此操作，方法是不顯示輸入按鈕（不透明度：0）並在每個 label 之前的偽元素中放置一個“假裝”按鈕。

此代碼段使用幾個 Unicode 圓圈來執行此操作，但當然您可能希望以其他方式執行此操作 - 例如背景無線電漸變或圖像。

這樣，如果在行尾沒有空間，label 將作為一個整體跨越整個區域。

 input { opacity: 0; position: absolute; left: 50px } input:checked+label::before { content: '\26ab'; } label { position: relative; } label::before { content: '\26aa'; 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>