Ver Mensaje Individual
  #3 (permalink)  
Antiguo 21/08/2015, 22:46
_Nick_
 
Fecha de Ingreso: agosto-2015
Mensajes: 2
Antigüedad: 9 años, 3 meses
Puntos: 3
Respuesta: Alinear horizontalmente cuatro elementos dentro de un header

Creo que quieres esto:

Código HTML:
Ver original
  1.   <img src="http://lorempixel.com/1/1">
  2.             <ul>
  3.                 <li><a href="#Boton1" class="botones-menu">Boton1</a></li>
  4.                 <li><a href="#Boton2" class="botones-menu">Boton2</a></li>
  5.                 <li><a href="#Boton3" class="botones-menu">Boton3</a></li>
  6.                 <li><input type="text" class="buscador"></li>
  7.             </ul>
  8.         </header>

Código CSS:
Ver original
  1. header {
  2.     width: 100%;
  3.     height: 70px;
  4.     background: #111;
  5.     display: flex;
  6.     justify-content:space-between;
  7.     flex-wrap: wrap;
  8. }
  9.  
  10. img {
  11.   width: 250px;
  12. }
  13.  
  14. ul {
  15.     display: flex;
  16.     align-items: center;
  17.     flex-wrap: wrap;
  18.  
  19. }
  20.  
  21. ul>li {
  22.     list-style: none;
  23. }
  24.  
  25. .botones-menu {
  26.     margin: 10px;
  27.     list-style: none;
  28.     background: #333;
  29.     color: #fff;
  30.     text-decoration: none;
  31.     width: 100px;
  32.     height: 35px;
  33.     display: flex;
  34.     align-items: center;
  35.     justify-content: center;
  36.     -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
  37.     -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
  38.     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  39.     font-size: .9em;
  40. }
  41.  
  42. .botones-menu:hover {
  43.     background: #222;
  44. }
  45.  
  46. .buscador {
  47.   margin-right: 10px;
  48.   height: 30px;
  49. }