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

Картинка в меню на 100% высоты?

Имеется навигация на сайте с фиксированной шириной.
Выглядит так:
<div class="menu">
	<ul>
		<li><a href="#"><img src="img/1.png">Главная</a></li>
		<li><a href="#"><img src="img/2.png">Ссылка</a></li>
		<li><a href="#"><img src="img/3.png">Ссылка</a></li>
		<li><a href="#"><img src="img/4.png">Ссылка</a></li>
		<li><a href="#"><img src="img/5.png">Ссылка переносится на вторую строку</a></li>
		<li><a href="#"><img src="img/6.png">Ссылка</a></li>
	</ul>
</div>


Пятая ссылка из-за длинного текста переносится на вторую строку и находится под картинкой.
Возможно ли сделать так, чтобы текст переносился, но был не под изображением. То есть область с картинкой занимала 100% пространства высоты?!

P.S. метод с картинками в background через css не подходит.
  • Вопрос задан
  • 384 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
@mrhat24 
.menu ul li a {
  display: flex;
  align-items: center;
}
.menu ul li a img {
  flex-shrink: 0;
  margin-right: 10px;
}

типо так, если нужно чтобы картинка растягивалась, можно добавить
.menu ul li a img {
  align-self: stretch;
}

но думаю это не надо, т.к. растянутая картинка выглядит не очень.
Если нужно чтобы текст был на уровне с картинкой, а не по центру было выравнивание, то
.menu ul li a {
  display: flex;
  align-items: baseline;
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
natojezlo
@natojezlo 
ul{display:grid; grid-template-columns:50px 1fr; list-style-type:none; align-items:center;}
li{background-size: auto 100%;}
li:nth-child(1) {background:url(img/1.png) left center no-repeat ; padding-left:50px;}
li:nth-child(2) {background:url(img/2.png) left center no-repeat ; padding-left:50px;}
li:nth-child(3) {background:url(img/3.png) left center no-repeat ; padding-left:50px;}
li:nth-child(4) {background:url(img/4.png) left center no-repeat ; padding-left:50px;}
li:nth-child(5) {background:url(img/5.png) left center no-repeat ; padding-left:50px;}
li:nth-child(6) {background:url(img/6.png) left center no-repeat ; padding-left:50px;}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Обработать массив фотографий
19 апр. 2024, в 08:46
5000 руб./за проект
Скрыть / убрать лишние поля в форме заказа
19 апр. 2024, в 07:30
1500 руб./в час
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Ещё заказы