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

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

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


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 15 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

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

Возникла проблема при вёрстке меню.
Нажмите на изображение для увеличения
Название: моё.jpg
Просмотров: 20
Размер:	79.0 Кб
ID:	96882
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
Просмотров: 8
Размер:	64.4 Кб
ID:	96883


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

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

Как-то так
Код:
* {
	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 вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
создание меню 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 20:50
Создание меню Elfix Microsoft Office Excel 8 20.10.2009 18:26
Создание меню на С KsandR Общие вопросы C/C++ 5 13.12.2007 22:34


15:42.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.

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