Как объединить кнопку поиска, и строку поиска, в один объект, чтобы можно было двигать ими одной строкой, и вид имело как есть?

<!DOCTYPE html>
<html>
 <head> 
 <meta charset="utf-8">
 <meta name='viewport' content='width=device-width,initial-scale=1'/>
   <title>XBase</title>
   <link rel="stylesheet" href="C:\Cайт\Код\ориг.css">
</head>
<body style="max-width:100%">
  <div class="wrapper">
  <form action="handler.php">
      <div class="SE">
          <search>
              <input type="search" class="S1" name="q" placeholder="Search" > 
          </search>
          <z3><button type="button" class="b1"><img src="C:\Cайт\ПоискЛого.png" alt=""></button></z3>
          </div>





html{
    background-color:black;
  }
  .SE{
    
  }
  search{
    position: absolute;
    top: 83px;
    left: 42.5%;
  }
.S1{ /*Строка поиска */
    color: white;
    border: solid;
    background-color: black;
    border-right: none;
    border-color: white;
    border-width: 4px;
    border-radius:15px 0px 0px 15px;
    width: 250px;
    height: 58px;
    font-size: large;
    outline: none;
    padding: 0 20px;
}
.b1{ /*Кнопка поиска */
background-color: black;
position: relative;
border: solid;
top: 75px;
border-left: none;
border-color: white;
border-width: 4px;
border-radius: 0px 15px 15px 0px;
outline: none;
left: 55.8%;
   }
    z3 img {        /*Кнопка поиска */
   width: 45px;
   height: 45px;
   }

Всё, получилось. Вопрос закрыт.


Ответы (0 шт):