Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.
Внимание! Некоторое время письма не доходят до аккаунтов MAIL RU GROUP, не доходят на все почтовые ящики mail.ru, inbox.ru, bk.ru. Пишите им жалобы, чтобы быстрее восстановили получение писем, регистрируйтесь через яндекс почту и gmail, туда письма с активизацией доходят.

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

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

Ответ
 
Опции темы
Старый 06.11.2018, 17:13   #1
Vaginator
Новичок
 
Регистрация: 06.11.2018
Сообщений: 2
Репутация: 10
По умолчанию Контент разделен на 2 строки

Привет! Сел за программирование(если можно так про HTML и CSS сказать) лишь месяц назад,потому сильно прошу не кидаться тапками. Решил, чтоб как-то поднять умения, найти готовый сайт и попытаться сделать точно такой же самому. У меня иконка поиска и навигация разбиваются на 2 строки, хотя такого не должно быть. Не могу это исправить. На первом скриншоте видно, что у меня, а на втором - что должно быть. Заранее спасибо!

HTML
Код:

<body>
  <div class="wrapper">
    <header>
      <div class="Logo">
	<a href="#"> <h1>Huh</h1> <img src="img/Logo.jpg" alt="Logo"> </a>
      </div>				
      <nav>
	<ul class="menu">
          <li><a href="#">Home</a></li>
	  <li><a href="#">Features</a></li>
	  <li><a href="#">Pages</a></li>
	  <li><a href="#">Shop</a></li>
	  <li><a href="#">Business</a></li>
	  <li><a href="#">Travel</a></li>
	  <li><a href="#">Contact</a></li>
	</ul>
	<div class="menu">
	  <form>
	    <button class="button"> <i class="fas fa-search"></i> </button>
	  </form>
      	</div>
      </nav>
    </header>
  </div>
</body>

CSS
Код:

header {
	background: #FFF;
	min-height: 67px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}



.button {
	background: transparent;
	color: #333333;
	border: 0;
}

.Logo h1 {
	display: none;
}

nav ul.menu {
	text-align: center;
	justify-content: space-between;
	font-size: 0;
}

nav ul.menu li {
	display: inline-block;
	font-size: 13px;
}

nav ul.menu li a {
	padding-right: 15px;
	padding-left: 15px;
	min-height: 67px;
	display: block;
	line-height: 67px;
}

Изображения
Тип файла: jpg Снимок1.JPG (14.3 Кб, 0 просмотров)
Тип файла: jpg 2.JPG (18.3 Кб, 0 просмотров)

Последний раз редактировалось Vaginator; 06.11.2018 в 17:20.
Vaginator вне форума   Ответить с цитированием
Ответ

Опции темы

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

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

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

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
контент и футер lansh HTML и CSS 2 30.10.2012 21:05
Не выводиться контент!!! might2012 WordPress и другие CMS 0 06.04.2012 15:51
Можно ли переместить контент, не перемещая строки кода? vlad-55 HTML и CSS 6 10.03.2012 17:22
Меняющийся контент 9GYAR HTML и CSS 3 20.07.2011 16:01
Постоянный контент страницы Ivanchikov HTML и CSS 7 15.03.2010 19:59


20:44.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru