1

Minha barra de pesquisa não se posiciona corretamente no final, e a parte inicial do menu não fica no inicio, fica tudo centralizado.

Segue meu código:

.barra{
        display: inline-flex;
        background-image: linear-gradient(150deg, #000080, #00BFFF);
        height: 50px
    }

.pesquisa{
    margin-right: auto;
    margin-left: auto;
    display: inline-flex;
}


.home2:not(.tutoriais){

    display: inline-flex;
    float: left !important;
    width: 50%;
    margin-right: 100px;
}


.section{

}
.pesquisa input button{
    float: right;
}


                    <div class="nav2 barra clear">
                    <ul class="home2">
                        <a class="Tutoriais" href="">Tutoriais</a>
                        <a class="Forum" href="">Fórum</a>
                        <a class="Login" href="">Login</a>
                        <a class="Cadastre-se" href="">Cadastre-se</a>
                    </ul>
                    <form method="get" class="pesquisa">
                        <input type="text" name="pesquisar" placeholder="Faça sua pesquisa" />
                        <button class="pesquisar" >Pesquisar</button>
                    </form>
                </div>

Gostaria que fica-se semelhante a barra de pesquisa da imagem abaixo: inserir a descrição da imagem aqui

3
  • Jovem seu código está bem bagunçado. Vc teria alguma imagem do layout de como vc gostaria que ficasse?
    – hugocsl
    6/03/2018 às 21:42
  • imgur.com/a/Yaz2I 6/03/2018 às 23:25
  • que bom que deu certo. Se a minha resposta te ajudou de alguma forma considere marca-la como aceita nesse ai ao lado esquerdo perto das setinhas. Basta clicar nele :)
    – hugocsl
    7/03/2018 às 16:00

2 Respostas 2

1

Jovem de acordo com a sua pergunta e os comentários que li por aqui acredito que é isso que vc quer. O menu ocupando a largura total e a barra de pequisa a direita.

Seu CSS tinha muita coisa que não precisava então simplifiquei um pouco retirando algumas coisas. Mesmo assim não está perfeito, mas acho que é um caminho pra vc seguir com seu projeto. (por exemplo <ul> sem <li> não está correto, vc pode arrumar isso se vc quiser)

Veja como ficou no Snippet

body {
	margin: 0;
}
.barra{
    display: inline-flex;
    background-image: linear-gradient(150deg, #000080, #00BFFF);
    height: 50px;
	width: 100%;
}
.pesquisa{
    display: inline-flex;
}
.home2:not(.tutoriais){
    display: inline-flex;
    width: 100%;
}
ul a {
	color: #fff;
	margin-right: 20px;
}
<div class="nav2 barra clear">
	<ul class="home2">
		<a class="Tutoriais" href="">Tutoriais</a>
		<a class="Forum" href="">Fórum</a>
		<a class="Login" href="">Login</a>
		<a class="Cadastre-se" href="">Cadastre-se</a>
	</ul>
	<form method="get" class="pesquisa">
		<input type="text" name="pesquisar" placeholder="Faça sua pesquisa" />
		<button class="pesquisar" >Pesquisar</button>
	</form>
</div>

6
  • Cara, muito obrigado :3 eu to aprendendo ainda CSS primeira vez tentando construir algo. Obrigado msm 7/03/2018 às 15:55
  • eh e realmente estava funcionando separadamente, o unico problema do meu codigo era que algumas coisas estavam dando conflito, vlw ai cara 7/03/2018 às 16:02
  • Sim tinha muita classe que não precisava, por isso dei uma enxugada no CSS, leia bastante, e veja alguns vídeos no Youtube, vai te ajudar muito a compreender melhor o HTML/CSS, sucesso! Se puder marcar a resposta como resolvida agradeço. Assim ajuda a manter o StackOverflow organizado.
    – hugocsl
    7/03/2018 às 16:04
  • como faz isso ? 7/03/2018 às 16:10
  • Logo no início da minha resposta a esquerda tem o número 0 com duas setar uma encima e outra embaixo. Ali tem um ícone basta clicar nele e a resposta fica como aceita.
    – hugocsl
    7/03/2018 às 16:12
0

Sua pergunta não foi clara, mas vamos lá, seria isso que você busca?

.barra {
  display: inline-flex;
  background-image: linear-gradient(150deg, #000080, #00BFFF);
  height: 50px
}

.pesquisa {
  margin-right: auto;
  margin-left: auto;
  display: inline-flex;
}

.home2:not(.tutoriais) {
  display: inline-flex;
  float: left !important;
  width: 50%;
  margin-right: 100px;
}

.pesquisa input button {
  float: right;
}
 <br>
  <br>
   <br>
<form method="get" class="pesquisa">
 
 <div class="nav2 barra clear">
    <p class="home2">
      &nbsp;<a class="Tutoriais" href="">Tutoriais</a>&nbsp;
      <a class="Forum" href="">Fórum</a>&nbsp;
      <a class="Login" href="">Login</a>&nbsp;
      <a class="Cadastre-se" href="">Cadastre-se</a>
    </p>


    <input type="text" name="pesquisar" placeholder="Faça sua pesquisa" />

    <button class="pesquisar">Pesquisar</button>


  </div>
</form>

1
  • Quase isso, o problema é que eu queria a barra de pesquisa lá na direita do site >>> no finalzinho da div 6/03/2018 às 23:46

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 .