Выровнять метку, флажок и текст по верху и по внутренней ячейке таблицы в WP - PullRequest
Новая
       13

Выровнять метку, флажок и текст по верху и по внутренней ячейке таблицы в WP

0 голосов
/ 01 февраля 2020

Попробуйте, как я мог бы использовать inline-block, вертикальное выравнивание и т. Д., Я не могу привести флажок и метку флажка в соответствие друг с другом и в верхней части ячейки таблицы в WordPress с темой 2017 , Ниже приведен рабочий пример в JSfiddle.

HTML

table class="table-class">
  <tr class="row-class">
    <td class="column-class">
      <div class="label-wrapper">
        <label class="label-class">
          <input class="input-checkbox" type="checkbox"/>
          <span class="A-text">
            A-Label
          </span>
          <span class="B-text">
            B-Label
          </span>
        </label>
      </div>
    </td>
    <td class="column-class">
      <div>
        x<br>x<br>x<br>x<br>x<br>
      </div>
    </td>
  </tr>
</table>

CSS

.label-class {
  display: inline-block;
}

.input-class {
  display: inline-block;
}

.A-text {
  display: block;
}

.B-text {
  display: none;
}

.input-checkbox:checked ~ .A-text {
  display: none;
}

.input-checkbox:checked ~ .B-text {
  display: inline-block;
}

.input-checkbox:not(:checked) ~ .A-text {
  display: inline-block;
}

.input-checkbox:not(:checked) ~ .B-text {
  display: none;
}

Внимание! Флажок должен быть внутри элемента метки, а элемент Текст флажка должен быть заключен в div.

Он должен выглядеть следующим образом:

□ A-Labelx
x
x
x
x
x

https://jsfiddle.net/1e9Lno0h/

Обновление: я попытался восстановить свойства по умолчанию в Wordpress, как показано, но все еще не смог получить флажок и флажок метка для выравнивания сверху. 

.wordpress-element {
  all: initial;  
}
...