0

necesito ayuda con un poco de CSS para botones dentro de un elemento "LI", resulta que tengo un genrador de historial en JS; el cual agrega cada elemento JSON del arreglo HISTORIAL al div HISTORIAL, sin embargo el estilo no me queda como me gustaría

   function AgregarAlHistorial(objetojson){
    Historial.push(objetojson);
    //console.log(Historial[0].Grados);

    var ul = document.getElementById("historial");
    ul.innerHTML = "";
    Historial.reverse();

    for (let index = 0; index < Historial.length; index++) {
      var li = document.createElement("li");

      var progresion = Historial[index].Grados[0] +" - "+ Historial[index].Grados[1] +" - "+ Historial[index].Grados[2] +" - "+ Historial[index].Grados[3];     
      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);
    }
   
   }

el html base es el siguiente, no importa si sufre muchos cambios:

        <section>
            <div class = "DivHistorial">
            <h1>Historial</h1>
              <ul id="historial">
                    <div>
                    <li>C# minor  <div><button>Play</button> <button>Download</button> </li>
                    </div>
              </ul>
            </div>
        </section>

el codigo css 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;
}

todo es me genera un historial como el siguiente:historial

sin embargo me gustaria que se vea mas como esto:resultado esperado

1
  • puedes intentar haciendo el div dentro de tu ul flexible (display: flex) el 7 oct. 2022 a las 19:24

1 respuesta 1

0

Te falta agregar display:flex; en cada li. Ten en cuenta que eldisplay:flex; solo afecta al contenedor que se lo pongas. Abajo te pongo dos ejemplos. En ambos el li tiene display:flex;, pero en uno los button están dentro de otro div. Si te das cuenta en el primero el display:flex; del li no afecta en el div.

En el segundo ejemplo agregamos el display:flex; al div de los button a través de una clase y se muestran en linea.

li {
  display:flex;
  width: 100%;
  justify-content:center:
  align-items:center;
}

li p {
  flex: 1;
}
li div {
 flex: 2;
 width:100%;
}

li div button {
 width:100%;
}

.with-flex {
  display: flex;
  justify-content:center:
  align-items:center;
}
<ul>
  <li>
    <p>C# minor</p>
      <div>
        <button>Play</button>
        <button>Download</button>
      </div>
  </li>
</ul>

<ul>
  <li>
    <p>C# minor</p>
      <div class="with-flex">
        <button>Play</button>
        <button>Download</button>
      </div>
  </li>
</ul>

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.