Как зафлоатить инпут?

Hasiev · December 15, 2016

Помогите пожалуйста, не получается сверстать вот такую банальную навигацию ..

Пробывал уже и inline-block, и флоат ..

Но инпут не прижимается к правому боку.

Можете ответ не говорить, скажите что не так делаю, и что поправить.

Вот мой измученый код:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
			example
		</title>
		<link type="text/css" rel="stylesheet" href="style.css">
	</head>
	<body>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">News</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Contact</a></li>
			<li><input type="search"></li>
		</ul>
	</body>
</html>

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
}

ul {
	background: red;
	list-style: none;
	width: 900px;
}

ul > li {
	background: green;
	float: left;
}

ul > li > input {
	float: right;
}

Edited December 15, 2016 by Hasiev

radioactive · December 16, 2016

а зачем вы дочернему элементу input задаете float right, задавайте этот стиль его родителю и все будет работать

хотя я бы переверстал это дело на это

<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">News</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
  </nav>
  <div class="search">
    <input type="search">
  </div>
</header>

header{
    overflow:hidden;
}
nav{
    float:left;
}
.search{
    float:right
}

Edited December 16, 2016 by radioactive

Hasiev · December 16, 2016

Решил проблему сам, отличный форум ..

npofopr · December 16, 2016

Вы правда думаете, что кому то захочется копировать ваш код? Пользуйтесь песочницами.

По коду выше, всё работает. Что уж у вас там в style.css, только вам известно.

Sign In

Как зафлоатить инпут?

Question

Hasiev

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

radioactive

Link to comment

Share on other sites

Hasiev

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information