0
222
ViewsNo se puede mover la posición del botón hacia abajo
Soy nuevo en CSS. Estoy tratando de mover la posición del botón hacia abajo que se superpone con otro botón. Intenté poner el botón en diferentes div, y aún enfrentaba el mismo problema. A continuación se muestra mi código
<div className="App"> {!showEvents && (<div> <button onClick= {() => setShowEvents(true)}>Show Events </button> </div>)} {showEvents && (<div> <button onClick = {() => setShowEvents(false)}>Hide Events</button> </div>)} <Title title={title} /> {showEvents && < Eventlist events={events} handleClick = {handleClick} />} {showModal && ( <Modal handleClose={handleClose}> <h2>Terms and Conditions</h2> <p>Agree the terms and Conditions</p> </Modal> )} <div> <button1 onClick={() => setShowModal(true)}> Show </button1> </div> </div> ); } // Export the App component to consume/ import the component in some other pages. export default App;Código CSS para dos botones
button{ display: inline-block; padding: 10px 20px; background: #f1f6; border-radius: 8px; font-weight: normal; height: 40px; } button1{ display: inline-block; padding: 10px 20px; background: #f1f6; border-radius: 8px; font-weight: normal; height: 40px; }En el código anterior, necesito mover el botón 1 hacia abajo desde el botón. ¿Alguien puede ayudarme a resolver este problema?
2 answers
Answer question0
Es probable que el botón ocupe todo el espacio del contenedor div. En su lugar, intente aplicar un margen al contenedor en lugar del botón
es decir.
.button-div { margin: 10px 0; }0
El problema es que no está aplicando un margen en el botón. Está aplicando relleno, que es el espacio desde el borde del botón interior hacia el contenido.
Debe aplicarle un margen y seguirá funcionando. Div es un elemento de bloque, por lo que si coloca un margen, se ampliará para que coincida con la altura necesaria.
Aplicar margen al div también es correcto, aunque depende de lo que intente lograr.