Как сделать боксы подряд?
Как сделать так, чтобы они шли подряд, а не так, как на картинке?
<style> .search-engine{ font-family: Noto; color: rgb(19,75,92,0.32); border: 5px solid rgb(92, 195, 255); border-radius: 20px; background-color: rgb(234, 245, 255); margin-left: 400px; margin-top: 20px; width: 300px; height: 50px; padding-left: 20px; padding-right: 20px; } .button{ border: 1px solid rgb(92, 195, 255); width: 30px; margin-left: 700px; height: 30px; border-radius: 10px; background-color: rgb(92, 195, 255); } </style> <input type="search" placeholder="Поиск товаров" class="search-engine" style="text-align: 15px; font-size: 15px; "><div class="button"></div> |
<style> .search-engine{ font-family: Noto; color: rgb(19,75,92,0.32); border: 5px solid rgb(92, 195, 255); border-radius: 20px; background-color: rgb(234, 245, 255); margin-left: 400px; margin-top: 20px; width: 300px; height: 50px; padding-left: 20px; padding-right: 20px; } .button{ border: 1px solid rgb(92, 195, 255); width: 30px; margin-left: 700px; height: 30px; border-radius: 10px; background-color: rgb(92, 195, 255); } </style> <input type="search" placeholder="Поиск товаров" class="search-engine" style="text-align: 15px; font-size: 15px; "><div class="button"></div>
Дополнительно:
Что-то типа того:
Разметка
<form class="search-form" action="" method="get"> <label class="visually-hidden" for="search">Поиск товаров</label> <input class="search-engine" id="search" type="search" placeholder="Поиск товаров"> <button class="button" type="submit">Найти</button> </form> |
<form class="search-form" action="" method="get"> <label class="visually-hidden" for="search">Поиск товаров</label> <input class="search-engine" id="search" type="search" placeholder="Поиск товаров"> <button class="button" type="submit">Найти</button> </form>
Стили
.search-form { display: flex; /* при необходимости свойства флекса для выравнивания */ gap: 20px; } .search-engine { font-size: 15px; color: #000; } .search-engine::placeholder { color: #808080; } .visually-hidden { position: fixed; transform: scale(0); } |
.search-form { display: flex; /* при необходимости свойства флекса для выравнивания */ gap: 20px; } .search-engine { font-size: 15px; color: #000; } .search-engine::placeholder { color: #808080; } .visually-hidden { position: fixed; transform: scale(0); }
<div class="container"> <input type="search" placeholder="Поиск товаров" class="search-engine"> <div class="button"></div> </div> |
<div class="container"> <input type="search" placeholder="Поиск товаров" class="search-engine"> <div class="button"></div> </div>
.container { display: flex; flex-direction: row; justify-content: center; align-items: center; } .search-engine{ font-family: Noto; color: rgba(19,75,92,0.32); border: 5px solid rgb(92, 195, 255); border-radius: 20px; background-color: rgb(234, 245, 255); width: 300px; height: 50px; padding-left: 20px; padding-right: 20px; font-size: 15px; margin-right: 10px; } .button{ border: 1px solid rgb(92, 195, 255); height: 50px; border-radius: 10px; background-color: rgb(92, 195, 255); width: 100px; } |
.container { display: flex; flex-direction: row; justify-content: center; align-items: center; } .search-engine{ font-family: Noto; color: rgba(19,75,92,0.32); border: 5px solid rgb(92, 195, 255); border-radius: 20px; background-color: rgb(234, 245, 255); width: 300px; height: 50px; padding-left: 20px; padding-right: 20px; font-size: 15px; margin-right: 10px; } .button{ border: 1px solid rgb(92, 195, 255); height: 50px; border-radius: 10px; background-color: rgb(92, 195, 255); width: 100px; }
- спасибо, как чайнику помогло отлично, жалко в будущих работах сложно будет понять что тут flex делает хах)
- xencocks,
Шпаргалка по Flexbox CSS
Ответы:
Либо по старинке - всем элементам, которые хотите сделать в ряд, даете свойство display: inline-block; либо по молодежному - делаете контейнер с display: flex и добавляете необходимые flex-свойства элементам, чтобы обеспечить выравнивание и пропорции заполнения блоков.
Еще древнее способ и самый правильный с точки зрения семантики HTML - элемент .button используете как input, а не div, чтобы все элементы в ряду были строчного типа - тогда мучиться с выравниванием не придется.
-
элемент .button используете как input
Заметно удобнее использовать <button>
- спасибо учту, жалко остается нужным еще и flex выучить, но спасибо, начну прямо сейчас
- Ankhena, спасибо, думал использовать его, но поскольку не требуется, чтобы кнопка вела на какую-либо страницу или выполняла какое-либо действие (курсовая работа), выбрал инпут, затем просто добавил селектор cursor, чтобы была "фальшивая" кнопка.
- xencocks, так у вас кнопка вовсе не фальшивая. Она производит действие. Значит нужно использовать тег button. А ведет на другую страницу обычно не кнопка, а ссылка.
- Сергей delphinpro, ну в этом коде да, я потом изменил уже на обычный бокс, чтобы меньше возьни было
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания боксов (или блоков) подряд на веб-странице можно использовать CSS. Вот несколько способов, как это можно сделать:
1. Flexbox:
Flexbox - это мощный инструмент в CSS, который позволяет управлять распределением элементов в контейнере. Для создания боксов подряд с помощью Flexbox, вам нужно задать свойство display: flex; для родительского контейнера и определить размеры и стили для дочерних элементов. Например:
.container { display: flex; } .box { width: 100px; height: 100px; margin-right: 10px; /* добавляет отступ между боксами */ }
2. Grid:
Еще один способ создания боксов подряд - использование CSS Grid. CSS Grid позволяет создавать сетки из элементов, управлять их расположением и размерами. Для этого вам нужно задать свойство display: grid; для родительского контейнера и определить шаблон сетки. Например:
.container { display: grid; grid-template-columns: repeat(3, 1fr); /* создает три колонки с равными ширинами */ grid-gap: 10px; /* добавляет отступ между боксами */ } .box { width: 100px; height: 100px; }
3. Float:
Еще один способ создания боксов подряд - использование свойства float. Вы можете задать значение float: left; для дочерних элементов, чтобы они выстраивались в ряд по горизонтали. Например:
.box { width: 100px; height: 100px; float: left; margin-right: 10px; /* добавляет отступ между боксами */ }
Это лишь несколько способов создания боксов подряд на веб-странице с использованием CSS. Вы можете выбрать подходящий для вашего проекта и настроить стили в соответствии с вашими потребностями.