Поиск левее чем название

Рейтинг: 0Ответов: 1Опубликовано: 16.01.2023

Как поменять название и поиск местами

button {
  font-size: 15px;
  padding: 10px;
  border-radius: 5px;
  color: black;
  border: none;
  background-color: rgb(26, 129, 0);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

div {
  padding: 30px 0
}

form {
  position: relative;
  width: 300px;
  margin: 0 auto;
}

.d1 input {
  width: 100%;
  height: 42px;
  padding-left: 10px;
  border: 2px solid #7BA7AB;
  border-radius: 5px;
  outline: none;
  background: #F9F0DA;
  color: #9E9C9C;
}

.d1 button {
  position: absolute;
  top: 0;
  right: 0px;
  width: 42px;
  height: 42px;
  border: none;
  background: #7BA7AB;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

.d1 button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}

.body1 {
  background-color: rgb(0, 0, 0);
}

.header1 h1 {
  color: bisque;
}

.header1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en" class="html1">

<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">
  <title>Document</title>
  <link href=krasivoe.css rel="stylesheet">
</head>

<body class="body1">
  <header class="header1">
    <div class="d1">
      <form>
        <input type="text" placeholder="Искать здесь...">
        <button type="submit"></button>
      </form>
    </div>
    <h1 class="mageazin">
      Магазин мага Зина
    </h1>
  </header>
  <main>

  </main>
  <footer>

  </footer>
</body>

</html>

css html
Источник: Stack Overflow на русском

Ответы

▲ 1

Как поменять название и поиск местами

Как вариант - применить

flex-direction: row-reverse;


button {
  font-size: 15px;
  padding: 10px;
  border-radius: 5px;
  color: black;
  border: none;
  background-color: rgb(26, 129, 0);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

div {
  padding: 30px 0
}

form {
  position: relative;
  width: 300px;
  margin: 0 auto;
}

.d1 input {
  width: 100%;
  height: 42px;
  padding-left: 10px;
  border: 2px solid #7BA7AB;
  border-radius: 5px;
  outline: none;
  background: #F9F0DA;
  color: #9E9C9C;
}

.d1 button {
  position: absolute;
  top: 0;
  right: 0px;
  width: 42px;
  height: 42px;
  border: none;
  background: #7BA7AB;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

.d1 button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}

.body1 {
  background-color: rgb(0, 0, 0);
}

.header1 h1 {
  color: bisque;
}

.header1 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
}
<body class="body1">
  <header class="header1">
    <div class="d1">
      <form>
        <input type="text" placeholder="Искать здесь...">
        <button type="submit"></button>
      </form>
    </div>
    <h1 class="mageazin">
      Магазин мага Зина
    </h1>
  </header>
  <main>

  </main>
  <footer>

  </footer>
</body>