Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 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;
}
Размер шрифта пришлось уменьшить
Лучший сервис выбора хостинга по параметрам.
Более 600 тарифов. Есть промокоды!
web-coder вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


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