alexbuki
@alexbuki
программист js

Как выровнять чекбокс по первой строке текста из двух строк?

Уважаемые мастера CSS подскажите как выровнять чекбокс по первой строке?
К сожалению я использую не нативный чекбокс, а вот эту библиотеку https://element.eleme.io/ для vue js.

В итоге на выходе получается такой html:
<p><label  role="checkbox" class="el-checkbox">
    <span aria-checked="mixed" class="el-checkbox__input">
        <span class="el-checkbox__inner"></span>
        <input type="checkbox" aria-hidden="true" class="el-checkbox__original" 
                    value="oop_treasury_concessionaire_daily_report__full_access">
    </span>
    <span class="el-checkbox__label">
        Ежедневный отчет концессионера. Полный доступ
    <!----></span>
</label>
</p>

<p ><label role="checkbox" class="el-checkbox"><span aria-checked="mixed" class="el-checkbox__input"><span class="el-checkbox__inner"></span><input type="checkbox" aria-hidden="true" class="el-checkbox__original" value="sno_znu__view"></span><span class="el-checkbox__label">
                                                        ЗНУ: Просмотр
                                            <!----></span></label></p>

У меня это выглядит так.
5d1ef8ab26abd625716611.png
Ширина p будет ограничена и переносы по-любому нужны!
Как видите выравнивание при переносе строки ( white-space: normal;)
самого чекбокса идет по нижней строке.
Как сделать чтобы выравнивание шло по верхней строке?
Если ставлю
.el-checkbox__label {
white-space: normal;
vertical-align: top;
}
то чекбокс поднимается на верх, но съезжает в самый верх label и находится не на одной оси со строкой:

5d1efaae215b3806616771.png

На codepen подключил стили из element ui примерно тоже что и у меня рисует:
https://codepen.io/alex-buki/pen/YojMdZ
  • Вопрос задан
  • 2043 просмотра
Решения вопроса 2
Chefranov
@Chefranov
Новичок
.el-checkbox__input {
    vertical-align: top;
    margin-top: 3px;
}
Ответ написан
wqertAnna
@wqertAnna
https://codepen.io/anon/pen/EBpzQZ
теперь это адаптивно, при изменении размера шрифта чекбокс всё равно остаётся по центру.
.el-checkbox__label {
    white-space: normal;
  font-size: inherit;  // размер шрифта наследуется от .el-checkbox
  line-height: 1.2em; // важно, чтобы значение было такое же, как высота контейнера чекбокса
}
.el-checkbox {
  display: flex;
  align-items: flex-start;
  font-size: 14px; // менять шрифт здесь, chekcbox всё равно по центру строки
}

.el-checkbox__input {
  display: flex;
  align-items: center;
  height: 1.2em; // тоже значение, что и высота строки .el-checkbox__label 
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы