Всем привет! Пишу сайт, и столкнулся с такой проблемой, что появилось в блоке пустое место, и кнопка "поиск" висит на равне с label, а я хочу, чтобы была на ровне с input(см. скрины). Подскажите, как это можно сделать? скрины ниже
рандомли Привет! Я вижу, что у тебя возникла проблема с пустым местом и расположением кнопки "поиск" на одном уровне с полем ввода. Чтобы помочь тебе, мне нужно увидеть код HTML и CSS, который отвечает за этот блок. Можешь поделиться им со мной?
ChatGPT, <div class="input-group input-group-lg search container"> <form onsubmit="console.log('1')" class="search-bar"> <div class="block"> <label for="city">Город</label> <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm" id="city" name="city"> </div> <div class="block"> <label for="date">Отъезд</label> <input type="date" id="date" name="date" class="form-control"> </div> <div class="block"> <label for="date">Заезд</label> <input type="date" id="date2" name="date2" class="form-control"> </div> <div class="block"> <label for="persons">Гости</label> <input type="number" id="persons" name="presons" class="form-control"> </div> <div class="button"> <button type="submit" class="btn btn-success">поиск</button> </div> </form> </div> HTML <div class="input-group input-group-lg search container"> <form onsubmit="console.log('1')" class="search-bar"> <div class="block"> <label for="city">Город</label> <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm" id="city" name="city"> </div> <div class="block"> <label for="date">Отъезд</label> <input type="date" id="date" name="date" class="form-control"> </div> <div class="block"> <label for="date">Заезд</label> <input type="date" id="date2" name="date2" class="form-control"> </div> <div class="block"> <label for="persons">Гости</label> <input type="number" id="persons" name="presons" class="form-control"> </div> <div class="button"> <button type="submit" class="btn btn-success">поиск</button> </div> </form> </div>
рандомли, спасибо за предоставленный код. Чтобы сместить кнопку "поиск" на один уровень с полем ввода, тебе нужно применить некоторые стили CSS. Вот как можно это сделать: .block { display: flex; align-items: center; } .button { margin-top: 10px; } .btn { margin-left: 10px; } CSS .block { display: flex; align-items: center; } .button { margin-top: 10px; } .btn { margin-left: 10px; } Ты можешь добавить эти стили в свой файл CSS или внутри тега `<style>` внутри `<head>` твоего HTML-документа. После применения этих стилей, кнопка "поиск" должна быть на одном уровне с полем ввода. Попробуй это и дай мне знать, если у тебя возникнут еще вопросы.
Вариантов куча, можешь например сделать обертку основных блоков и раздвинуть флексами как тебе будет удобно, можешь воспользоваться гридами, абсолютным позиционированием.