0

Minha barra de pesquisa não fica dentro do border do div. Era pra tudo estar em uma única linha dentro do div, mas a barra de pesquisa fica abaixo do border do div.

body{
    margin:0;
}
.conteudo{
    border: 1px solid #dfe1e5;
    box-shadow: none;
    border-radius: 24px;
    height:46px;
    width:484px;
}
.conteudo-alinhador{
    width:100vw;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.conteudo:hover{
    box-shadow: 0 0 5px #dfe1e5;
}
.lupa{
    padding-left:10px;
    padding-right:13px;
    height:45px;
    width:22px;
    color:#9aa0a6;
}
.barra-pesquisa{
    border:none;
    height:90%;
    width:auto;
}
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="estilo.css"/>
    </head>
     <!-- A ideia aqui foi recriar a tela inicial do google usando apenas o html e css -->
    <body>
        <div class="container">
            <center><img src="https://www.google.com/logos/doodles/2020/december-holidays-days-2-30-6753651837108830.3-law.gif"/></center>
            <div class="conteudo-alinhador"><div class="conteudo">
                <div class="pesquisa">
                    <svg class="lupa" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
                    <input type="text" class="barra-pesquisa"/>
                </div></div>
            </div>
        </div>
    </body>
</html>

1 Resposta 1

0

Trabalhe com o elemento de classe pesquisa adicionando o código:

.pesquisa {
  display: flex;
  align-items: center;
}

Usando display: flex; e align-items: center; para alinhar verticalmente os input.

Coloquei um border: 1px solid black; no input para visualizar mais facilmente e entender onde este está localizado:

.barra-pesquisa {
  border: 1px solid black;
  height: 90%;
  width: auto; 
}

Veja o resultado:

    body {
      margin: 0;
    }
    .conteudo {
      border: 1px solid #dfe1e5;
      box-shadow: none;
      border-radius: 24px;
      height: 46px;
      width: 484px;
    }
    .conteudo-alinhador {
      width: 100vw;
      align-items: center;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
    }
    .conteudo:hover {
      box-shadow: 0 0 5px #dfe1e5;
    }
    .lupa {
      padding-left: 10px;
      padding-right: 13px;
      height: 45px;
      width: 22px;
      color: #9aa0a6;
    }
    .barra-pesquisa {
      border: 1px solid black;
      height: 90%;
      width: auto;
    }
    .pesquisa {
      display: flex;
      align-items: center;
    }
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="estilo.css" />
  </head>
  <!-- A ideia aqui foi recriar a tela inicial do google usando apenas o html e css -->
  <body>
    <div class="container">
      <center>
        <img
          src="https://www.google.com/logos/doodles/2020/december-holidays-days-2-30-6753651837108830.3-law.gif"
        />
      </center>
      <div class="conteudo-alinhador">
        <div class="conteudo">
          <div class="pesquisa">
            <svg
              class="lupa"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
            >
              <path
                d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
              ></path>
            </svg>
            <input type="text" class="barra-pesquisa" />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .