Мне нужна такая структура в HTML:

enter image description here

Кто-нибудь знает, как я могу добиться этого, чтобы указанные выше метки были выровнены соответственно с переключателями? Самая большая проблема, с которой я столкнулся, - это горизонтальные метки над каждым переключателем.

Приветствуется просто чистое решение 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
user3574492 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
Tim Gerhard 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
Nitin Dhomse 13 Мар 2018 в 10:49