0
194
ViewsEl texto de expansión empuja otros elementos (botones) hacia la derecha y hacia la izquierda
Estoy tratando de crear un sistema de votación para mi sitio web, pero actualmente estoy luchando con el estilo de los contadores de votos positivos y negativos. Así es como se ve en este momento:
Como puede ver, el problema es que cada vez que el número en el lado derecho o izquierdo de los botones se hace grande, empuja otros elementos. Quiero que los dos botones permanezcan en el centro y que el contador de votos a favor crezca hacia la izquierda y el de votos negativos hacia la derecha. De esta manera, todo quedará centrado.
Aquí está mi código CSS actual:
.upvoteButtonsContainer{ display: flex; justify-content: center; margin-top: 15px; } .upvoteButton{ margin-right: 2px; border: none; background-color: transparent; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius: 5px; font-size: 25px; } .downvoteButton{ margin-left: 2px; border: none; background-color: transparent; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius: 5px; font-size: 25px; } .upvoteCounterContainer{ display: block; direction: rtl; text-align: right; } .downvoteCounterContainer{ display: block; direction: ltr; text-align: left; } .upvoteCounter{ margin-right: 5px; } .downvoteCounter{ margin-left: 5px; }Y mi código HTML:
<div className="homePage"> {imageLists.map((image) => { return ( <div className="container"> <div className="meme"> <img src={image} className="meme-img"></img> </div> <div className="upvoteButtonsContainer"> <div className="upvoteCounterContainer"> <span className="upvoteCounter">120</span> </div> <button type="button" className="upvoteButton"> 👍 </button> <button type="button" className="downvoteButton"> 👎 </button> <div className="downvoteCounterContainer"> <span className="downvoteCounter">1241123123310</span> </div> </div> </div> ); })} </div>¡Gracias!
1 answers
Answer question0
Si siempre desea que los botones estén en el centro y no le importa que los números se dividan en nuevas líneas para números excepcionalmente grandes, puede resolver esto por position: absolute con bastante facilidad:
.upvoteButton{ position: relative; } .downvoteButton{ position: relative; } .upvoteCounterContainer{ position: absolute; top: 50%; transform: translateY(-50%); right: calc(100% + 5px); } .downvoteCounterContainer{ position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 5px); }Y luego envolviendo los contadores dentro de los botones:
<div className="upvoteButtonsContainer"> <button type="button" className="upvoteButton"> 👍 <div className="upvoteCounterContainer"> <span className="upvoteCounter">120</span> </div> </button> <button type="button" className="downvoteButton"> 👎 <div className="downvoteCounterContainer"> <span className="downvoteCounter">1241123123310</span> </div> </button> </div>Cambios adicionales: puede eliminar todos los estilos de alineación/dirección del texto. Si esto no funciona correctamente, puede intentar colocar los íconos en contenedores específicos (Divs/spans). Si los contadores no obtienen un ancho automático (su ancho no crece en función de su contenido). puede calcular y darles un valor fijo.