Как сделать боксы подряд?

Question

[xencocks]

Как сделать так, чтобы они шли подряд, а не так, как на картинке?

<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>

Comments

[Ankhena]

Что-то типа того:
Разметка

<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);
}

Answer 1

[Sergey]

<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;
}

Comments

[xencocks]

спасибо, как чайнику помогло отлично, жалко в будущих работах сложно будет понять что тут flex делает хах)

[Sergey]

xencocks,

Шпаргалка по Flexbox CSS

Answer 2

[alexalexes]

Либо по старинке - всем элементам, которые хотите сделать в ряд, даете свойство display: inline-block; либо по молодежному - делаете контейнер с display: flex и добавляете необходимые flex-свойства элементам, чтобы обеспечить выравнивание и пропорции заполнения блоков.
Еще древнее способ и самый правильный с точки зрения семантики HTML - элемент .button используете как input, а не div, чтобы все элементы в ряду были строчного типа - тогда мучиться с выравниванием не придется.

Comments

[Ankhena]

элемент .button используете как input

Заметно удобнее использовать <button>

[xencocks]

спасибо учту, жалко остается нужным еще и flex выучить, но спасибо, начну прямо сейчас

[xencocks]

Ankhena, спасибо, думал использовать его, но поскольку не требуется, чтобы кнопка вела на какую-либо страницу или выполняла какое-либо действие (курсовая работа), выбрал инпут, затем просто добавил селектор cursor, чтобы была "фальшивая" кнопка.

[Сергей delphinpro]

xencocks, так у вас кнопка вовсе не фальшивая. Она производит действие. Значит нужно использовать тег button. А ведет на другую страницу обычно не кнопка, а ссылка.

[xencocks]

Сергей delphinpro, ну в этом коде да, я потом изменил уже на обычный бокс, чтобы меньше возьни было