Форум программистов
 
О проблемах, например, с регистрацией пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Ответ
 
Опции темы
Старый 06.06.2019, 19:07   #1
xpehoc
Новичок
Джуниор
 
Регистрация: 02.04.2019
Сообщений: 2
По умолчанию Создание меню

Возникла проблема при вёрстке меню.
моё.jpg
HTML код
Код:
<div class="menu">
	<ul>
			<li><a href="#">VOIP<br> ОБОРУДОВАНИЕ</a></li>
			<li><a href="#">SKYPE<br> ОБОРУДОВАНИЕ</a></li>
			<li><a href="#">GSM<br> ОБОРУДОВАНИЕ</a></li>
			<li><a href="#">ВИДЕО-<br>ОБОРУДОВАНИЕ</a></li>
			<li><a href="#">РАДИО И DECT<br> ТЕЛЕФОНЫ</a></li>
			<li><a href="#">ГАРНИТУРЫ<br> </a></li>
			<li><a href="#">ЭЛЕКТРОННЫЕ<br> ЗАМКИ</a></li>
			<li><a href="#">ДОМОФОННЫЕ<br> СИСТЕМЫ</a></li>
			<li><a href="#">СИСТЕМЫ ЗАПИСИ<br> ТЕЛЕФОННЫХ РАЗГОВОРОВ</a></li>
			<li><a href="#">СЕТЕВОЕ<br> ОБОРУДОВАНИЕ</a></li>
			<li><a href="#"><br>><br></a></li>
	</table>
</div>
CSS код
Код:
.menu {
	width: 80%;
	margin: 0 auto;
	display: flex;
}

.menu ul {
	list-style: none;
}

.menu ul li {
	display: inline;
	border: 1px solid white;
	font-size: 15px;
}

.menu a {
  text-decoration: none;
  color: white;
  display: inline-block;
  padding: 10px 10px;
  background-color: #5D4BD8;
  border-bottom: 5px solid #150873;
  margin-left: -.36em;
}

.menu li:first-child {
	margin-left: 0;
}

.menu a:hover {
	background: blue;
	text-decoration: underline;
}
Пожалуйста, оформляйте Ваш код согласно правилам.
1. На данный момент не знаю как выставить все элементы <li> в одну строку, что бы они не сползали, как показано на Макете ниже
2019.06.06 18-28-27.jpg


2. Как сделать <li> одной высоты. Т.к. в одной из ячеек находится одно слово - этот блок ниже чем остальные

Последний раз редактировалось Alex11223; 24.06.2019 в 14:44.
xpehoc вне форума Ответить с цитированием
Старый 18.06.2019, 18:38   #2
web-coder
Пользователь
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 70
По умолчанию

Как-то так
Код:
* {
	box-sizing: border-box;
}
.menu {
	width: 80%;
	margin: 0 auto;
}
.menu ul {
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
}
.menu ul li {
	display: block;
	font-size: 12px;
	margin: 0;
	padding: 0;
}
.menu ul li + li{
	border-left: 1px solid white;
}
.menu a {
	text-decoration: none;
	color: white;
	display: block;
	width: 100%;
	height: 100%;
	padding: 10px;
	background-color: #5D4BD8;
	border-bottom: 5px solid #150873;
}
.menu a:hover {
	background: blue;
	text-decoration: underline;
}
Размер шрифта пришлось уменьшить
web-coder вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
создание меню mirabola HTML и CSS 3 02.10.2012 21:30
Создание меню WorldMaster C# (си шарп) 4 14.04.2012 14:55
Создание Меню Vinokurovpavel Microsoft Office Excel 1 02.03.2010 19:50
Создание меню Elfix Microsoft Office Excel 8 20.10.2009 17:26
Создание меню на С KsandR Общие вопросы C/C++ 5 13.12.2007 21:34


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS