如何创建按顶部标签分组的单选按钮
How do I create radio button grouped by labels on top
我在HTML中追求这种结构：
任何人都知道我怎样才能做到这一点，以便上面的标签与单选按钮相应地对齐？我遇到的最大问题是每个单选按钮上方的水平标签。
只是一个纯粹的 html 和 CSS 解决方案，我们将不胜感激。
这是我蹩脚的尝试，我正在使用语义 UI React：
<div class="row question-row">
<div class="three wide column radio-statements"><p>Statement one</p><p>Statement two</p><p>
Statement three</p></div>
<div class="five wide column">
<form class="ui form radio-question"><label class="horizontal-label">High</label><label
class="horizontal-label">Medium</label><label
class="horizontal-label">Low</label><label class="horizontal-label">N/A</label>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="1"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="2"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="3"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="4"><label></label></div>
</div>
</div>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="5"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="6"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="7"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="8"><label></label></div>
</div>
</div>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="9"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="10"><label></label>
</div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="11"><label></label>
</div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="12"><label></label>
</div>
</div>
</div>
</form>
</div>
</div>
CSS:
.ui {
.sub-section-grid {
.question-row {
margin-bottom: 30px;
}
.radio-statements {
top: 20px;
}
.horizontal-label {
margin-right: 20px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.57;
letter-spacing: normal;
text-align: left;
color: #868686;
}
.help-text {
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.67;
letter-spacing: normal;
text-align: left;
color: rgba(139, 142, 142, 0.7);
}
.info
{
&.circle {
margin-bottom: 20px;
margin-top: -40px;
}
}
}
}
使用一些不错的 html 表格怎么样？
td {
width:20%;
}
<table>
<thead>
<tr>
<td></td>
<td>High</td>
<td>Medium</td>
<td>Low</td>
<td>N/A</td>
</tr>
</thead>
<tbody>
<tr>
<td>Statement one</td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
</tr>
<tr>
<td>Statement two</td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
</tr>
<tr>
<td>Statement three</td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
</tr>
</tbody>
</table>
仅 css 修复的工作示例。
.inline{
display : flex;
}
.question-row {
display: flex;
}
.field{
padding-top: 8px;
padding-left: 14px;
}
.horizontal-label{
padding-left: 4px;
}
<div class="row question-row">
<div class="three wide column radio-statements"><p>Statement one</p><p>Statement two</p><p>
Statement three</p></div>
<div class="five wide column">
<form class="ui form radio-question"><label class="horizontal-label">High</label><label
class="horizontal-label">Medium</label><label
class="horizontal-label">Low</label><label class="horizontal-label">N/A</label>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="1"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="2"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="3"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="4"><label></label></div>
</div>
</div>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="5"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="6"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="7"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="8"><label></label></div>
</div>
</div>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="9"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="10"><label></label>
</div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="11"><label></label>
</div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="12"><label></label>
</div>
</div>
</div>
</form>
</div>
</div>
我在HTML中追求这种结构：
任何人都知道我怎样才能做到这一点，以便上面的标签与单选按钮相应地对齐？我遇到的最大问题是每个单选按钮上方的水平标签。
只是一个纯粹的 html 和 CSS 解决方案，我们将不胜感激。
这是我蹩脚的尝试，我正在使用语义 UI React：
<div class="row question-row">
<div class="three wide column radio-statements"><p>Statement one</p><p>Statement two</p><p>
Statement three</p></div>
<div class="five wide column">
<form class="ui form radio-question"><label class="horizontal-label">High</label><label
class="horizontal-label">Medium</label><label
class="horizontal-label">Low</label><label class="horizontal-label">N/A</label>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="1"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="2"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="3"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="4"><label></label></div>
</div>
</div>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="5"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="6"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="7"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="8"><label></label></div>
</div>
</div>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="9"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="10"><label></label>
</div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="11"><label></label>
</div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="12"><label></label>
</div>
</div>
</div>
</form>
</div>
</div>
CSS:
.ui {
.sub-section-grid {
.question-row {
margin-bottom: 30px;
}
.radio-statements {
top: 20px;
}
.horizontal-label {
margin-right: 20px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.57;
letter-spacing: normal;
text-align: left;
color: #868686;
}
.help-text {
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.67;
letter-spacing: normal;
text-align: left;
color: rgba(139, 142, 142, 0.7);
}
.info
{
&.circle {
margin-bottom: 20px;
margin-top: -40px;
}
}
}
}
使用一些不错的 html 表格怎么样？
td {
width:20%;
}
<table>
<thead>
<tr>
<td></td>
<td>High</td>
<td>Medium</td>
<td>Low</td>
<td>N/A</td>
</tr>
</thead>
<tbody>
<tr>
<td>Statement one</td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
</tr>
<tr>
<td>Statement two</td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
</tr>
<tr>
<td>Statement three</td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
</tr>
</tbody>
</table>
仅 css 修复的工作示例。
.inline{
display : flex;
}
.question-row {
display: flex;
}
.field{
padding-top: 8px;
padding-left: 14px;
}
.horizontal-label{
padding-left: 4px;
}
<div class="row question-row">
<div class="three wide column radio-statements"><p>Statement one</p><p>Statement two</p><p>
Statement three</p></div>
<div class="five wide column">
<form class="ui form radio-question"><label class="horizontal-label">High</label><label
class="horizontal-label">Medium</label><label
class="horizontal-label">Low</label><label class="horizontal-label">N/A</label>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="1"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="2"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="3"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="4"><label></label></div>
</div>
</div>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="5"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="6"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="7"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="8"><label></label></div>
</div>
</div>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="9"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="10"><label></label>
</div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="11"><label></label>
</div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="12"><label></label>
</div>
</div>
</div>
</form>
</div>
</div>