I am after this sort of structure in HTML:
Anyone know how I can achieve this so that the above labels are aligned accordingly with the radio buttons? The biggest problem I have is the horizontal labels above each radio button.
Just a pure html and CSS solution would be appreciated.
Here is my lame attempt, I am using Semantic 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;
}
}
}
}
How about using some good ol' html tables?
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>