Элементы не сплывают влево (float:left)

248

25 марта 2018, 19:25

Возможно решение здесь очень простое, но я уже много чего попробовал, и толку нету. Нужно чтобы список и соц кнопки были в одной строке, пытался задавать флоаты для них отдельно, но тоже не работает, не понимаю в чем дело. Менял обертку для соц кнопок с блочного на строчный элемент, но тоже ничего. Еще список растягивался на всю страницу, думал в этом дело, поставил ему ширину и макс ширину, но также эффекта нет. Нужен опытный глаз и пояснение, чтоб на будущее знал)

Код

a[href*='face'] { 
  text-decoration: none; 
  color: #3b5998; 
  font-size: 30px; 
} 
 
a[href='http://facebook.com']:hover { 
  /*color: black*/ 
  ; 
} 
 
a[href*='telegram'] { 
  text-decoration: none; 
  color: #0099e5; 
  font-size: 30px; 
} 
 
a[href*='twitter'] { 
  text-decoration: none; 
  color: #0088cc; 
  font-size: 30px; 
} 
 
div { 
  float: left; 
  /* display: inline; */ 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<div> 
  <ul> 
    <li>Terms</li> 
    <li>Contacts</li> 
    <li>About</li> 
  </ul> 
  <div class="socials2"> 
    <a href='https:twitter.com' class="fa fa-twitter" target="_blank"></a> 
    <a href="http://facebook.com" class="fa fa-facebook-square" target='_blank'></a> 
    <a href='http:telegram.org' class="fa fa-telegram" target="_blank"></a> 
  </div> 
</div>

Answer 1

Вариант с flex:

* { 
  margin: 0; 
  padding: 0; 
} 
 
.wrapper { 
  display: flex; 
  justify-content: space-between; 
} 
 
a[href*='face'] { 
  text-decoration: none; 
  color: #3b5998; 
  font-size: 30px; 
} 
 
a[href='http://facebook.com']:hover { 
  /*color: black*/ 
  ; 
} 
 
a[href*='telegram'] { 
  text-decoration: none; 
  color: #0099e5; 
  font-size: 30px; 
} 
 
a[href*='twitter'] { 
  text-decoration: none; 
  color: #0088cc; 
  font-size: 30px; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<div class="wrapper"> 
  <ul> 
    <li>Terms</li> 
    <li>Contacts</li> 
    <li>About</li> 
  </ul> 
  <div class="socials2"> 
    <a href='https:twitter.com' class="fa fa-twitter" target="_blank"></a> 
    <a href="http://facebook.com" class="fa fa-facebook-square" target='_blank'></a> 
    <a href='http:telegram.org' class="fa fa-telegram" target="_blank"></a> 
  </div> 
</div>

Вариант с float:

P.S. Обёртку на 100% ширину, чтобы она растягивалась, затем указываем float: left для списка, float: right для иконок.

* { 
  margin: 0; 
  padding: 0; 
} 
 
.wrapper { 
  width: 100%; 
} 
 
ul { 
  float: left; 
} 
 
.socials2 { 
  float: right; 
} 
 
a[href*='face'] { 
  text-decoration: none; 
  color: #3b5998; 
  font-size: 30px; 
} 
 
a[href='http://facebook.com']:hover { 
  /*color: black*/ 
  ; 
} 
 
a[href*='telegram'] { 
  text-decoration: none; 
  color: #0099e5; 
  font-size: 30px; 
} 
 
a[href*='twitter'] { 
  text-decoration: none; 
  color: #0088cc; 
  font-size: 30px; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<div class="wrapper"> 
  <ul> 
    <li>Terms</li> 
    <li>Contacts</li> 
    <li>About</li> 
  </ul> 
  <div class="socials2"> 
    <a href='https:twitter.com' class="fa fa-twitter" target="_blank"></a> 
    <a href="http://facebook.com" class="fa fa-facebook-square" target='_blank'></a> 
    <a href='http:telegram.org' class="fa fa-telegram" target="_blank"></a> 
  </div> 
</div>

Answer 2

Через float тогда это свойство нужно применять к списку и блоку с соцальными иконками.
Через flex тогда блоку-обертке со значением display: flex, если нужно чтоб пункты меню тоже были в 1 линию, пропишите display: flex для списка

Answer 3

a[href*='face'] { 
text-decoration: none; 
color: #3b5998; 
font-size: 30px; 
} 
 
a[href='http://facebook.com']:hover { 
/*color: black*/; 
} 
 
a[href*='telegram'] { 
text-decoration: none; 
color: #0099e5; 
font-size: 30px; 
} 
 
a[href*='twitter'] { 
text-decoration: none; 
color: #0088cc; 
font-size: 30px; 
} 
 
div { 
	display: flex; 
	/* display: inline; */ 
} 
 
ul { 
    display: inline-flex; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
	<title>Document</title> 
</head> 
<body> 
<div> 
	<ul> 
		<li>Terms</li> 
		<li>Contacts</li> 
		<li>About</li> 
	</ul> 
	<div class="socials2"> 
 	<a href='https:twitter.com' class="fa fa-twitter" target="_blank"></a> 
 	<a href="http://facebook.com" class="fa fa-facebook-square" target='_blank'></a> 
 	<a href='http:telegram.org' class="fa fa-telegram" target="_blank"></a> 
 </div> 
 </div> 
</body> 
</html>

Answer 4

a[href*='face'] { 
text-decoration: none; 
color: #3b5998; 
font-size: 30px; 
} 
 
a[href='http://facebook.com']:hover { 
/*color: black*/; 
} 
 
a[href*='telegram'] { 
text-decoration: none; 
color: #0099e5; 
font-size: 30px; 
} 
 
a[href*='twitter'] { 
text-decoration: none; 
color: #0088cc; 
font-size: 30px; 
} 
 
div { 
	float:left; 
	/* display: inline; */ 
} 
.menu{ 
  width:100%; 
} 
.menu ul li{ 
  float:left; 
  display:inline-block; 
  margin-right: 16px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
	<title>Document</title> 
</head> 
<body> 
<div class="menu"> 
	<ul> 
		<li>Terms</li> 
		<li>Contacts</li> 
		<li>About</li> 
	</ul> 
</div> 
 
<div class="socials2"> 
 	<a href='https:twitter.com' class="fa fa-twitter" target="_blank"></a> 
 	<a href="http://facebook.com" class="fa fa-facebook-square" target='_blank'></a> 
 	<a href='http:telegram.org' class="fa fa-telegram" target="_blank"></a> 
</div> 
</body> 
</html>

А вообще в данный момент float-ы не очень удобная вещь по сравнению с flexbox. Вот статья, если интересно: http://html5.by/blog/flexbox/