Estoy escribiendo un cuadro de búsqueda y un botón de envío de búsqueda, intento varias formas de hacer que el botón y el cuadro de texto estén en la misma línea, pero no funciona. Aquí está mi código.
return ( <Form onSubmit={submitHandler} inline> <Form.Control type='text' name='q' onChange={(e) => setKeyword(e.target.value)} placeholder='Serach product' className='mr-sm-2 ml-sm-5' ></Form.Control> <Button type='submit' variant='btn btn-success' className='p-2'> search </Button> </Form> ) La versión de Reactjs es ^17.0.1 en mi archivo package.jason, pero cuando uso npm info react en cmd me muestra react@18.1.0
Gracias la respuesta del Sr. Gandhi https://stackoverflow.com/a/72385731/19202374
Cambie la entrada y/o el botón para que se muestre: en línea en el css O simplemente puede poner display flex en el contenedor principal de la entrada y el botón.
Envuelva los elementos de su formulario en un div y proporcione un nombre de clase (por ejemplo, contenedor flexible).
return ( <Form onSubmit={submitHandler} inline> <div className="flex-container"> <Form.Control type='text' name='q' onChange={(e) => setKeyword(e.target.value)} placeholder='Serach product' className='mr-sm-2 ml-sm-5' ></Form.Control> <Button type='submit' variant='btn btn-success' className='p-2'> search </Button> </div> </Form> )Después de eso, agregue debajo de css
.flex-container { display: flex; }