2

body {  
  background-color: #f2f2f2;
  font-family: "Futura PT", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* для корректного отображения текста на всех экранах*/
  -webkit-overflow-scrolling: touch;
  /*для нормального скроллинга*/
}
.header-top {
   height:40px;
    background: #ffffff;
    line-height:40px;    
}    
nav {
  display:flex;
  border-bottom:1px solid #ccc;
  background-color: #ffffff;
  width: 100%;
  height: 50%;  
}
nav .nav-title {
  color:#686868;
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 17px;
  margin-left: 68px; 
  margin-right: 70px;
  margin-top: 22px;
}
nav .navigation {
  list-style: none;
  display:flex;
  color: gray;
  flex-grow:1;
}
nav .navigation li {
   text-align: center;
   font-size: 16px;
   /*странно, но нижняя тень работает только так, если поставить ; она будет отображаться некорректно*/   
   /*margin-bottom: 11px;
   margin-top: 25px;*/
   margin: 0; 
   padding: 0;
         
}

nav .navigation li.selectable:hover {
box-shadow:0 -2px 0 0 #1c76bc inset;
}

nav .navigation li.left {
    flex-grow:1;
    text-align:right;
    margin-right: 100px;
}
/* Подписаться на розсылку*/

nav .navigation a{
  color: #686868;
  text-decoration: none;
  text-align: center;
  padding: 25px 19px;  
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>domjuristablog2</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	
	<header>
		<div class="header-top">
    	Header top
		</div>
	</header>
    		<nav>
  			<div class="nav-title">Блог</div>
  			<ul class="navigation">
    			<li class="selectable"><a href="#">Для бізнесу</a></li>
    			<li class="selectable"><a href="#">Для юристів</a></li>
    			<li class="left"><a href="#">Підписатися на розсилку</a></li>
  			</ul>
		</nav>
    </body>
</html>

3 ответа 3

2

Используйте для nav .navigation{...} свойство

flex-wrap: wrap;

Тогда у Вас всё, что не влезает на экран, будет перемещаться на следующую строку (в пределах flex'а, само собой). А дальше уже через @media(...){...} поправляйте стили под разные версии экранов, чтобы это смотрелось как-то по-человечески.

0

Нашел более элегантное решение и поместил "Подписаться на расслыку" в отдельный див и задал ему координаты.

0

Удалите свойство flex-grow: 1;

nav .navigation li.left { flex-grow: 1; ...

2
  • Сначало предлагаете удалить, а во второй строке - оставить и перенести на первое место. Это как?
    – 0xdb
    3 авг 2018 в 23:40
  • @0xdb человек показал где удалить нужно.
    – Tsyklop
    4 авг 2018 в 7:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.