0

Tengo el siguiente menú, esto en una view de C# MVC:

body {
  /*background:#f5751a;*/
  margin: 0px;
}

.menu {
  width: 100%;
  background: #142b47;
  overflow: auto;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 60px;
}

.menu li {
  float: left;
}

.menu ul li a {
  background: #142b47;
  text-decoration: none;
  width: 130px;
  display: block;
  text-align: center;
  color: #f2f2f2;
  font-size: 18px;
  font-family: sans-serif;
  letter-spacing: 0.5px;
}

.menu ul li a:hover {
  color: #fff;
  opacity: 0.5;
  font-size: 19px;
}

.search-form {
  margin-top: 15px;
  float: right;
  margin-right: 100px;
}

.search-form input[type=text] {
  padding: 7px;
  border: none;
  font-size: 16px;
  font-family: sans-serif;
  border-radius: 5px 0 0px 5px;
}

.search-form button {
  width: 120px;
  float: right;
  background: #f5751a;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  position: relative;
  padding: 7px;
  font-family: sans-serif;
  border: none;
  font-size: 16px;
}


/*====================================================
   CARRITO DE COMPRAS
====================================================*/

#carrito {
  position: relative;
  width: 50px;
  font-size: 16px;
  background: #ff0000;
}
<!-- Font Awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

<!-- HTML -->
<div class="wrapper">
  <nav class="menu">
    <ul>
      <li><a href="#">Inicio</a></li>
      <li><a class="active" href="#">Home</a></li>
      <li><a href="#">Contato</a></li>
      <li><a href="#">League</a></li>
      <li><a href="#">Tournament</a></li>
      <li><a href="#">User</a></li>
    </ul>
    <form class="search-form">
      <input type="text" name="text" placeholder="Buscar">
      <button>Buscar</button>
    </form>

  </nav>

  <button id="carrito" class="btn btn-default pull-left">
    <i class="fa fa-shopping-cart" aria-hidden="true"></i>
  </button>

</div>

Pero me queda de la siguiente manera el botón Buscar:

Me queda el botón abajo. ¿Podrían ayudarme para que quede al lado del botón buscar?

2
  • El problema es que si deja el botón fuera del contenedor no va a tomar las propiedades del Css. Primero lo primero
    – Juanchi36
    el 1 abr. 2018 a las 16:57
  • No entiendo cual es el comportamiento esperado.
    – Alvarez
    el 3 abr. 2018 a las 13:31

2 respuestas 2

0

El detalle no es que este dentro o fuera del nav, lo que debes utilizar en el css es el posicionamiento del objeto, aqui te dejo un link donde esta muy bien explicado: http://librosweb.es/libro/css/capitulo_5/posicionamiento_flotante.html:

estes es un ejemplo para posicionar un elemento al final del otro:

.contenedor {
    width:600px;
    height:400px;
    margin:auto;
    background-color:#0CF;
    border:#000 solid 3px;
    position:relative;
}

.enlace {
    width:100px;
    height:40px;
    background-color:#06F;
    border:#FFF solid 2px;
    bottom:0px;
    right:0px;
    position:absolute;
}
-1

Debes incluir al botón dentro de la etiqueta nav, es mas, tanto este botón como el input de búsquedas deberían ser un li dentro de tu nav. Solamente con hacer eso se ordenarían todos tus items y el botón del carrito tomaría la última posicion. Acá te dejo el html, un saludo!

<div class="wrapper">
  <nav class="menu">
    <ul>
      <li><a href="#">Inicio</a></li>
      <li><a class="active" href="#">Home</a></li>
      <li><a href="#">Contato</a></li>
      <li><a href="#">League</a></li>
      <li><a href="#">Tournament</a></li>
      <li><a href="#">User</a></li>
      <li>
        <form class="search-form">
          <input type="text" name="text" placeholder="Buscar">
          <button>Buscar</button>
        </form></li>
      <li>
        <button id="carrito" class="btn btn-default pull-left">
        <i class="fa fa-shopping-cart" aria-hidden="true"></i>
        </button></li>
    </ul>
  </nav>
</div>

2
  • Esto es una pregunta, una corrección, una respuesta? Desarrolla tu explicación e intenta que el texto solo se refiera al código y/o la solución. Piensa que la gente no busca comentarios, sino respuestas. Echale un vistazo a Cómo responder.
    – GDP
    el 3 abr. 2018 a las 13:26
  • Es una respuesta, gracias por tu interes! Un saludo!
    – Juanchi36
    el 3 abr. 2018 a las 13:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.