Misaligned search bar of the div

Asked

Viewed 30 times

0

My search bar is not inside the border of div. It was all supposed to be in one line inside the div, but the search bar is below the border of the 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>

html css

1 answer

0


Work with the class element pesquisa adding the code:

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

Using display: flex; and align-items: center; to align input vertically.

I put a border: 1px solid black; in the input to view more easily and understand where this is located:

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

See the result:

    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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.