Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/08/2015, 14:08
Avatar de kahlito
kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años, 9 meses
Puntos: 65
Alinear horizontalmente cuatro elementos dentro de un header

Hola.

Estoy intentando alinear un título, logo, menu (nav) y un campo de formulario de búsqueda todo dentro del mismo encabezado header. He probado varias opciones, incluso logro tenerlos alineados h1 y el logo pero si sigo añadiendo más no encuentro la manera.

Estoy probando de esta manera:

Código HTML:
Ver original
  1. <!-- Header -->
  2.     <header>           
  3.         <h1>Mira tu regalo</h1>
  4.         <img src="img/logo-web.png" class="logo">      
  5.         <nav>
  6.             <ul>               
  7.                 <li class="inicio"><a href="index.php" accesskey="i" title="Web">Inicio</a></li>
  8.                 <li class="que-ofrecemos"><a href="que-ofrecemos.php" accesskey="q" title="Qué ofrecemos">Qué ofrecemos</a></li>
  9.                 <li class="registro"><a href="login.php" accesskey="r" title="Registro">Registro</a></li>              
  10.             </ul>
  11.         </nav>      
  12.         <aside id="buscador">
  13.             <!-- Aquí formulario de búsqueda -->
  14.             <form action="" method="post" name="buscar_usuario">
  15.                 <input type="text" name="usuario">
  16.                 <input type="submit" name="buscar" value="Buscar">
  17.             </form>
  18.             <!-- Fin formulario de búsqueda -->
  19.             <p>Texto de prueba</p>
  20.         </aside>       
  21.     </header>
  22.     <!-- Fin Header -->

Y el estilo siguiente:

Código CSS:
Ver original
  1. header{
  2.     background-color: #EC7176;
  3.     width: 98%;
  4. }
  5. header h1 {
  6.     display: inline-block; 
  7.     margin: 10px;
  8.     text-align: left;
  9.     width: 35%;
  10. }
  11. header > img{
  12.     border: 1px solid black;
  13.     display: inline-block;
  14.     text-decoration: underline;
  15. }
  16. header > nav{
  17.     background: #64A174;
  18.     display: inline-block;
  19.     text-align: center;
  20.     width: 10%;
  21.     /*width: 98%;*/
  22. }
  23. header > aside{
  24.     border: 1px solid black;
  25.     display: inline-block;
  26. }

¿Qué otra opción debo probar o en que estoy fallando?

Gracias, saludos