0

necesito ayuda con un poco de CSS para botones dentro de un elemento "LI", resulta que tengo un genrador de historial en JS;

li.appendChild(document.createTextNode(Historial[index].Root+" MINOR | "+progresion));
      var buttonP = document.createElement("button");
      var buttonD = document.createElement("button");
      buttonP.innerHTML = "";

      var i = document.createElement("i");
      i.className = "gg-play-button-o" 
      buttonP.className = "btn-play";
      buttonP.appendChild(i);


      
      buttonD.innerHTML = "";
      var i = document.createElement("i");
      i.className = "gg-software-download" 
      buttonD.className = "btn-play";
      buttonD.appendChild(i);
      li.appendChild(buttonP);
      li.appendChild(buttonD);
      buttonP.onclick=function(){ Sonar(Historial[index])  };
      buttonD.onclick=function(){DescargarMidi(Historial[index])};
      
      ul.appendChild(li);

esto genera un historial como el siguiente:historial generado

sin embargo me gustaria que se parezca mas a algo como esto: como deberia ser

el codigo css del historial y de la lista es el siguiente:

@import url('https://css.gg/software-download.css');
@import url('https://css.gg/play-button-o.css');

#historial {
    display: inline-block;
    text-align: left;
    background-color: aliceblue;
    width: 800px;
}
.DivHistorial{
    text-align: center;
}
.btn-play {
    display: flex;
    align-items: center;
    justify-content: center;
width: 100px;
height: 100px;
}
1
  • 1
    Sería ideal que agregues el código html para poder ver bien como es la estructura, donde se están creando los ul, li y otros elementos como "Historial".. De otra manera es imposible entender lo que intentas hacer. En cuanto a alinearlos, debería bastar con envolver textos y botones en un div y a ese div que los encierra aplicarle display: flex. Te sugiero leer Cómo preguntar, se sugiere subir un código minimo verificable. Commented el 7 oct. 2022 a las 5:10

1 respuesta 1

0

Lo ideal sería incluir el código que genera ese código Javascript para saber dónde se aplican los selectores #historial y .DivHistorial, pero para conseguir alinear cada elemento de la lista como pretendes, podrías añadirle al li que corresponda algo así:

li {
    display: flex;
    flex-direction: row;
    align-items: center; /* Alinea verticalmente en el centro respecto al eje horizontal */
}

li .btn-play {
    margin-left: 1rem; /* Sirve para aplicar un margen a la izquierda del botón, evitando que queden pegados entre ellos y al texto */
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.