es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Problema de botón de búsqueda móvil en barra superior de respuesta.

26 May, 2023 Programación

Seguí una guía en internet para implementar una barra de búsqueda encima de mi barra de navegación y responsive, pero tengo un problema al visualizarlo desde un dispositivo móvil: el botón de mi caja de búsqueda aparece debajo de mi caja de búsqueda.

Algo así.

Aquí está mi código en HTML

html



y mi css

    .topnav .search-container {
      float: right;
    }

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav span, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }

¿Cómo puedo hacer que el botón en la vista móvil esté en la misma fila al lado derecho de mi caja de búsqueda?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Puede utilizar la consulta @media en su CSS para ajustar el estilo de la caja de búsqueda y el botón cuando el tamaño de la pantalla es inferior a 600px. Esto le permitirá ajustar el estilo de los elementos para que el botón se muestre en la misma fila que la caja de búsqueda.

    Por ejemplo, puede agregar el siguiente código a su CSS:

    @media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav span, .topnav input[type=text], .topnav .search-container button {
    float: left;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}

    Esto ajustará el estilo de la caja de búsqueda y el botón cuando el tamaño de la pantalla es inferior a 600px, de modo que el botón se muestra en la misma fila que la caja de búsqueda.

Comments are closed.