Почему input и button выпадают из div?

97
22 февраля 2021, 15:20

В общем нужно сделать так, чтобы в div находился input и button (типо как строка поика, но еще с background в ). Но по каким-то причинам они выпадают. Я подозреваю это из за flex-ов.

body{ 
	width: 100%; 
	margin: 0; 
} 
.all-wrapper{ 
	width: 100%; 
	height: 1892px; 
} 
.control-panel{ 
	width: 100%; 
	height: 28px; 
	background-color: #424242; 
	display: flex; 
	align-items: center; 
	text-align: right; 
} 
.control-panel .ctLink{ 
	font-family: Arial; 
	font-size: 18px; 
	color: #f2f2f2; 
	text-decoration: none; 
	margin-left: 20px; 
} 
.wrapper-lim{ 
	width: 1560px; 
	border: 1px solid orange; 
	margin: 0 auto; 
} 
header{ 
	width: 100%; 
	height: 112px; 
	border: 1px solid black; 
	display: flex; 
	align-items: center; 
	background: linear-gradient(0deg, #ebebeb, #fff) 
} 
.logo{ 
	width: 136px; 
	height: 74px; 
	display: block; 
	background-image: url(photos/logo.png); 
	margin-right: 65px; 
} 
.another-lim{ 
	display: flex; 
} 
.search{ 
	width: 458px; 
	height: 40px; 
	background-color: #79b260; 
	border: 1px solid; 
} 
#sear{ 
	width: 326px; 
	height: 32px; 
} 
#butSearch{ 
	width: 126px; 
	height: 32px; 
}
<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<link rel="stylesheet" href="style.css"> 
	<script src="Script.js"></script> 
</head> 
<body> 
	<div class="all-wrapper"> 
		<div class="control-panel"> 
			<div class="wrapper-lim"> 
				<a href="" class="ctLink">Sing in</a> 
				<a href="" class="ctLink">My Account</a> 
				<a href="" class="ctLink">Order Status</a> 
				<a href="" class="ctLink">Help</a> 
			</div> 
		</div> 
		<header class="ant"> 
			<div class="wrapper-lim another-lim"> 
				<a href="" class="logo"></a> 
				<div class="search"></div> 
					<input type="text" id="sear"> 
					<button id="butSearch">Search</button> 
				</div> 
			</div> 
		</header> 
	</div> 
</body> 
</html>

Answer 1

Тут у Вас ошибка:

<div class="search"></div>
    <input type="text" id="sear">
    <button id="butSearch">Search</button>
</div>

div с классом search сразу же закрывается, то-есть должно быть так по-идеи:

<div class="search">
    <input type="text" id="sear">
    <button id="butSearch">Search</button>
</div>
READ ALSO
Обновление элементов в ComboBox после Get запроса
c#

Обновление элементов в ComboBox после Get запроса

У меня после запроса приходит список, который я заполняю в ComboboxУ меня получается так, что после нового запроса список в Combobox дополняется,...

 130
Где посмотреть все коды ошибок при регистрации?
c#

Где посмотреть все коды ошибок при регистрации?

У меня поставленная регистрация:

 108
Красивая обертка для try-catch в C#
c#

Красивая обертка для try-catch в C#

Вопрос не про то, как красиво программировать, чтобы этот вопрос не возникал, а про красивую обертку над try-catch

 110
Информация о OnTriggerEnter2D
c#

Информация о OnTriggerEnter2D

Есть такие методы как OnTriggerEnter2D и OnTriggerStay2DКак узнать когда объект входит в триггер, а когда начинается фаза Stay, я имею ввиду, есть ли какой-то...

 104