Как в HTML два поля вода input сделать в одну строку?
Подскажите как два поля ввода сделать в одну строку
<div class="form-group"> <label for="name" class="control-label">Name</label> <input type="text" class="form-control" id="name" name="name" placeholder="Имя"> </div> <div class="form-group"> <label for="name" class="control-label">Name</label> <input type="text" class="form-control" id="login" name="login" placeholder="Логин"> </div> |
<div class="form-group"> <label for="name" class="control-label">Name</label> <input type="text" class="form-control" id="name" name="name" placeholder="Имя"> </div> <div class="form-group"> <label for="name" class="control-label">Name</label> <input type="text" class="form-control" id="login" name="login" placeholder="Логин"> </div>
Ответы что тут нашел, не помогают.
Дополнительно:
Позанудничаю немножко.
Два инпута сами по себе встают в строку.
И их лейблы тоже.
Но вы их обернули в div.
И теперь вам в строку нужно поставить их.
В современном мире это удобнее всего делать флексами или гридами.
Можно и inline-block, но будет отступ между ними.
Что вам мешает посмотреть документацию? Там полно примеров.
https://getbootstrap.com/docs/
Ответы:
.form-group { display: inline-block; } |
.form-group { display: inline-block; }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы разместить два поля ввода input в одну строку в HTML, можно использовать элементы div с инлайновым стилем или CSS для управления их расположением. Вот пример использования CSS:
.input-container { display: flex; } .input-container input { flex: 1; margin-right: 10px; } <div class="input-container"> </div>.input-container { display: flex; } .input-container input { flex: 1; margin-right: 10px; } <div class="input-container"> </div>
В этом примере мы создали контейнер div с классом "input-container" и использовали CSS свойство display: flex для расположения дочерних элементов в строку. Затем мы применили flex: 1 к каждому элементу input внутри контейнера, чтобы они занимали равные части доступного пространства и margin-right: 10px для создания отступа между ними.
Таким образом, два поля ввода input будут расположены в одну строку на вашей веб-странице. Вы можете настраивать стили и размеры полей ввода по вашему усмотрению, чтобы они соответствовали дизайну вашего сайта.