Мне нужна такая структура в HTML:
Кто-нибудь знает, как я могу добиться этого, чтобы указанные выше метки были выровнены соответственно с переключателями? Самая большая проблема, с которой я столкнулся, - это горизонтальные метки над каждым переключателем.
Приветствуется просто чистое решение html и CSS.
Вот моя неудачная попытка, я использую 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;
}
}
}
}
1
13 Мар 2018 в 13:35
2 ответа
Лучший ответ
Как насчет использования старых добрых таблиц 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>
1
13 Мар 2018 в 10:42
Рабочий пример только с исправлением 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>
0
13 Мар 2018 в 10:49
En Español