Задать вопрос
@mishapsv
html

Можно ли не меняя разметку расположить элементы?

Вот здесь пример
Есть лейблы, а перед текстом лейбла должна быть красная точка - обозначение обязательного поля.
Если текст лейбла короткий (1) - все отлично, красная точка стоит, как надо.
Но если текст длинный и текст переносится(2), то точка оказывается на левой границе блока, а не возле начала текста.
Можно ли это исправить только css-ом (править разметку очень нежелательно)?
Если нельзя, как бы вы поменяли разметку?
  • Вопрос задан
  • 133 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Не меняя разметки, да и стили только слегка: https://codepen.io/anon/pen/EdNqjp
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 2
@skuvaWeb
Если вы имеете перенос обеих точек, то измените свойство align-items у flex контейнера-родителя (.control-label в вашем случае)
Если вам нужно спозиционировать только 1 из 2 точек, то задайте родителю position: relative; а точке position: absolute; и двигайте как вам надо
Ответ написан
1 комментарий
1 комментарий
Stalker_RED
@Stalker_RED 
label {
  position: relative;
}
label:before {
  position: absolute;
  left: .5em; top: 1em;
}

https://codepen.io/anon/pen/xyRobd
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Подключить авторизацию через Firebase в приложении React Native
18 апр. 2024, в 13:18
20000 руб./за проект
Скрипт по работе с API и записи в MySQL данных (задача на сегодня)
18 апр. 2024, в 13:03
5000 руб./за проект
HTML макет для Email рассылки
18 апр. 2024, в 13:01
3000 руб./за проект
Ещё заказы