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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 06.11.2018, 16:13   #1
Vaginator
Новичок
Джуниор
 
Регистрация: 06.11.2018
Сообщений: 2
По умолчанию Контент разделен на 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 Кб, 148 просмотров)
Тип файла: jpg 2.JPG (18.3 Кб, 149 просмотров)

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


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

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
контент и футер 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 18:59