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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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