0
102
VistasAgregue un salto de línea entre los botones generados en el ciclo de reacción
Estoy tratando de agregar un salto de línea después de un botón que se genera en un ciclo de reacción. He intentado agregar elementos pero eso no ha funcionado:
<div className="connect-container"> <div> {connectors.map((connector) => ( <button className="metamask-button" disabled={!connector.ready} key={connector.id} onClick={() => connect(connector)} > {connector.name} {!connector.ready && ' (unsupported)'} {isConnecting && connector.id === pendingConnector?.id && ' > > >'} </button> )) } </div> Debe haber un espacio entre los botones. Actualmente se apilan sin espaciamiento. 
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Puedes hacer esto usando el siguiente CSS
.connect-container button { display: block; width: 100%; float: none; }Otra forma simple y fácil de usar flex-box.
.connect-container>div{ display: flex; flex-direction: column }ejemplo de código
.connect-container button { display: block; width: 100%; float: none; } <div class="connect-container"> <div> <button className="metamask-button" > Button 1 </button> <button className="metamask-button" > Button 2 </button> </div>Ejemplo 2:
.connect-container>div{ display: flex; flex-direction: column; } <div class="connect-container"> <div> <button className="metamask-button" > Button 1 </button> <button className="metamask-button" > Button 2 </button> </div>
·
Juan Pablo Isaza
Denunciar
0
Este enfoque funcionó, pero solo al agregar margin-bottom:
.connect-container button { display: block; width: 100%; float: none; margin-bottom: 10px; }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta