如何使用 HTML 表格和/或 CSS 设置水平单选按钮？答案

【问题标题】：How to set horizontal radio button with HTML table and/or CSS?如何使用 HTML 表格和/或 CSS 设置水平单选按钮？
【发布时间】：2020-11-02 13:03:51
【问题描述】：

我想使用水平单选按钮，但不知道如何实现。按照我的代码，任何形式的帮助都是可观的：

    <div wicket:id="divRadioButton">
    <table id="centeredTable">
            <tr>
            <td class="sixColumnsTable" align="right"><label wicket:id="lbRadioButtonFourMonths"></label> </td> 
            <td class="sixColumnsTable" align="left"><input wicket:id="radioButtonFourMonths" type="hidden"></input></td>
         
         
            <td></td>               
            <td class="sixColumnsTable" align="right"><label wicket:id="lbRadioButtonFreePeriodChoice"></label> </td> 
            <td class="sixColumnsTable" align="left"><input wicket:id="radioButtonFreePeriodChoice" type="hidden"></input></td>

            </tr>
    </table>
    </div>

提前致谢

【问题讨论】：

这更多是您用来显示单选按钮的 html + css 的问题，而不是真正特定于检票口。
我已经实现了 html 代码，但显然是垂直的......我使用 wicket 有很多原因，其中一个原因是项目的框架实际上是我正在工作的
这里没有关于 Wicket 的内容。问题纯粹是HTML + CSS。我已经编辑了标题和标签。

标签： java html css web

【解决方案1】：

这是我使用 css flexbox 属性的解决方案。

#radios {

  display:flex;
  flex-direction: column;

}

<div id="radios">
<label>First radio <input type="radio" name="radios" value="r1"></label>
<label>Second radio <input type="radio" name="radios" value="r2"></label>
<label>Third radio <input type="radio" name="radios" value="r3"></label>
<label>Fourth radio <input type="radio" name="radios" value="r4"></label>
</div>

【讨论】：