My search bar is not positioned correctly

Question

My search bar is not positioned correctly

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

My search bar does not position correctly at the end, and the initial part of the menu is not at the beginning, everything is centralized.

Follow my code:

.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>

I would like it to look similar to the image search bar below:

css menu nav-bar

asked by anonymous 06.03.2018 / 22:34

2 answers

0

Your question was not clear, but come on, is this what you are looking for?

.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>

07.03.2018 / 00:41

Download Automatically Plotting .xls file with matplotlib and openpyxl

score 1 · Accepted Answer

Young according to your question and the comments I read here I believe that this is what you want. The menu taking full width and the search bar to the right.

Your CSS had a lot of things you did not need so I simplified things a little bit by removing some things. Even though it is not perfect, but I think it is a way for you to follow through with your project. (for example <ul> without <li> is not correct, you can fix this if you want)

See how you got on 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>