Почему <input type="text" и flex не работают вместе?
Я не понимаю, почему окно поиска становится больше, когда я добавляю display:flex в свой css. Может кто-нибудь сказать мне, почему окно поиска становится больше и как исправить его до нормальной высоты? Я хочу, чтобы панель поиска и значок поиска также были склеены. Спасибо вам за помощь!
* {
font-family: "poppins";
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<link rel = "stylesheet" href = "css/style2.css" />
<link
href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel = "stylesheet"
/>
<link
rel = "stylesheet"
href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
integrity = "sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l"
crossorigin = "anonymous"
/>
<title>Document</title>
</head>
<body>
<header>
<a href = "#">My Logo</a>
<ul class = "navigation">
<a href = "#"><li>Home</li></a>
<a href = "#"><li>TV Shows</li></a>
<a href = "#"><li>Movies</li></a>
<a href = "#"><li>Latest</li></a>
<a href = "#"><li>My List</li></a>
</ul>
<input type = "text" placeholder = "Search" />
<i class = "bi bi-search"></i>
</header>
</body>
</html>
Ответы 6
* {
font-family: "poppins";
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
}
header .navigation {
display: flex;
}
header .navigation li {
margin: 0 .3rem;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<link rel = "stylesheet" href = "css/style2.css" />
<link
href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel = "stylesheet"
/>
<link
rel = "stylesheet"
href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
integrity = "sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l"
crossorigin = "anonymous"
/>
<title>Document</title>
</head>
<body>
<header>
<a href = "#">My Logo</a>
<ul class = "navigation">
<a href = "#"><li>Home</li></a>
<a href = "#"><li>TV Shows</li></a>
<a href = "#"><li>Movies</li></a>
<a href = "#"><li>Latest</li></a>
<a href = "#"><li>My List</li></a>
</ul>
<input type = "text" placeholder = "Search" />
<i class = "bi bi-search"></i>
</header>
</body>
</html>Как сейчас написано, ваш ответ неясен. Пожалуйста, редактировать, чтобы добавить дополнительную информацию, которая поможет другим понять, как это относится к заданному вопросу. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.
Вы можете указать align-items
Может быть, вы хотите flex-start вместо stretch по умолчанию.
ввод занимает всю высоту flexbox из-за значения растяжения по умолчанию для поперечной оси. Чтобы предотвратить это, вам нужно задать вводу определенную высоту, например min-content. В качестве альтернативы вы можете предотвратить это, добавив align-items: flex-start в flex-контейнер.
Использование чего-то другого, кроме стандартного align-items: strech;:
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
}<header>
<a href = "#">My Logo</a>
<ul class = "navigation">
<a href = "#">
<li>Home</li>
</a>
<a href = "#">
<li>TV Shows</li>
</a>
<a href = "#">
<li>Movies</li>
</a>
<a href = "#">
<li>Latest</li>
</a>
<a href = "#">
<li>My List</li>
</a>
</ul>
<input type = "text" placeholder = "Search" />
<i class = "bi bi-search"></i>
</header>Предоставление ввода определенной высоты:
* {
font-family: "poppins";
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
}
input {
height: min-content;
}<header>
<a href = "#">My Logo</a>
<ul class = "navigation">
<a href = "#">
<li>Home</li>
</a>
<a href = "#">
<li>TV Shows</li>
</a>
<a href = "#">
<li>Movies</li>
</a>
<a href = "#">
<li>Latest</li>
</a>
<a href = "#">
<li>My List</li>
</a>
</ul>
<input type = "text" placeholder = "Search" />
<i class = "bi bi-search"></i>
</header>Хорошо. а где значок поиска?!
он не отображается из-за удаленных зависимостей начальной загрузки. Я урезал код до минимально-воспроизводимого. Не было необходимости включать весь головной элемент
Вы можете обернуть теги input и i в div:
* {
font-family: "poppins";
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<link rel = "stylesheet" href = "css/style2.css" />
<link
href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel = "stylesheet"
/>
<link
rel = "stylesheet"
href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
integrity = "sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l"
crossorigin = "anonymous"
/>
<title>Document</title>
</head>
<body>
<header>
<a href = "#">My Logo</a>
<ul class = "navigation">
<a href = "#"><li>Home</li></a>
<a href = "#"><li>TV Shows</li></a>
<a href = "#"><li>Movies</li></a>
<a href = "#"><li>Latest</li></a>
<a href = "#"><li>My List</li></a>
</ul>
<div>
<input type = "text" placeholder = "Search" />
<i class = "bi bi-search"></i>
</div>
</header>
</body>
</html>это происходит из-за того, что по умолчанию свойство flex align-items настроено на растяжение, чтобы избежать этой проблемы, вы можете установить высоту в поле ввода или изменить значение свойства align-items на flex-start.
проверить https://www.w3schools.com/cssref/css3_pr_align-items.asp
Это происходит потому, что ваш класс навигации имеет большую высоту, а по умолчанию высота элемента ввода равна высоте контейнера.
Собираем все вместе: Я понял, что к этому есть 3 решение.
Либо вы пишете высота ввода: минимальное содержание;
сделайте .навигация равным гибкий дисплей, что уменьшит высоту этого компонента.
Добавьте align-items : flex-start или центр к элементу заголовок, что уменьшит высоту элемента ввода.
input{
height: min-content;
}
.navigation{
display:flex;
}
header{
...other styles of this element
align-items:flex-start;
}
Вы можете использовать любой из вышеперечисленных стилей для решения вашей проблемы.
Вы проверили свой собственный фрагмент? Я сомневаюсь, что испортить весь макет - это то, чего хочет достичь ОП.