Como posicionar un <form> con css?

[IVICP3]

Tengo este form, con un input text y un input submit pero esta mal colocado, lo quiero colocar a la altura de la linea, pero no puedo por mucho que le ponga margins en css, no se mueve.

Código HTML:

<ul class="nav nav-tabs">
<li id="left" ><a href="index.php" class="glyphicon glyphicon-home" style="cursor:pointer; background:"> Home</a></li>
    <li ><a href="perfil.php" class="glyphicon glyphicon-user" style="cursor:pointer; background:"> Perfil</a></li>
    <li ><a href="chat.php" class="glyphicon glyphicon-envelope" style="cursor:pointer; background:"> Chat</a></li>
    <li ><a class="glyphicon glyphicon-plane" style="cursor:pointer; background:"> Lugares</a></li>
    <li ><a href="salir.php" class="glyphicon glyphicon-remove-sign" style="cursor:pointer"> Salir</a></li>
    <form class="buscar" action="buscar.php" method="POST">
    <input id="buscar" type="text" name="buscarusu" placeholder="Buscar usuario" size="11"> 
    <input type="submit" value="Buscar">
    </form>
</ul>
 

Código CSS:

#buscar{
  margin-bottom: 35px;
}
 

En cambio, si quito el <form> y dejo los input , queda asi.

Código HTML:

<ul class="nav nav-tabs">
<li id="left" ><a href="index.php" class="glyphicon glyphicon-home" style="cursor:pointer; background:"> Home</a></li>
    <li ><a href="perfil.php" class="glyphicon glyphicon-user" style="cursor:pointer; background:"> Perfil</a></li>
    <li ><a href="chat.php" class="glyphicon glyphicon-envelope" style="cursor:pointer; background:"> Chat</a></li>
    <li ><a class="glyphicon glyphicon-plane" style="cursor:pointer; background:"> Lugares</a></li>
    <li ><a href="salir.php" class="glyphicon glyphicon-remove-sign" style="cursor:pointer"> Salir</a></li>
    <input id="buscar" type="text" name="buscarusu" placeholder="Buscar usuario" size="11"> 
    <input type="submit" value="Buscar">
</ul>
 

Código CSS:

#buscar{
  margin-top: 15px;
}
 

Porque pasa esto? Si quiero pasar los datos del input text, da igual si pongo <form> o no? Como se haria?


Gracias.

[webosiris]

a) Tu html está mal, valídalo. No puedes poner directamente un form dentro de un UL.
b) Deberías de empezar a usar display:flex

[fede5426]

Algo muy basico seria hacer esto:

Código HTML:

<nav>
  <ul class="nav-tabs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Perfil</a></li>
    <li><a href="#">Chat</a></li>
    <li><a href="#">Lugares</a></li>
    <li><a href="#">Salir</a></li>
  </ul>
  <form class="form-buscar" action="buscar.php" method="post">
      <input id="buscar" type="text" name="buscar" /> 
      <input type="submit" value="Buscar"/>
  </form>
</nav>
 

Código CSS:

nav{
  width:800px;
  margin:0 auto;
  background-color:#c2c2c2;
}
 
.nav-tabs, .form-buscar{
  display:inline-block;
  vertical-align:middle;
}
 
.nav-tabs li{
  display:inline-block;
}
 

http://codepen.io/anon/pen/aOOWjd

Pero veo que estas usando bootstrap.. en su sitio tienen la explicacion de como hacer un navbar incluyendo links, dropdown menu y formularios de busqueda..

Te dejo el link para que lo revises: Components - Navbar | Bootstrap