«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Как сделать отступ для последующих строк переносимых меток в CSS?

Как сделать отступ для последующих строк переносимых меток в CSS?

Опубликовано 8 ноября 2024 г.
Просматривать:696

How to Indent Subsequent Wrapped Label Lines in CSS?

Отступы в последующих строках переносимого текста метки

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

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

Заключите элемент ввода и его метку в родительский контейнер с помощью класса "checkbox-field". Установите свойство display этого родительского элемента на "flex" и flex-direction на "row".

.checkbox-field {
  display: flex;
  flex-direction: row;
}

Пример использования:

Это решение гибко адаптирует текст метки к доступной ширине, сохраняя при этом единообразный внешний вид.

Заявление о выпуске Эта статья перепечатана по адресу: 1729725831. Если есть какие-либо нарушения, свяжитесь с [email protected], чтобы удалить их.
Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3