0

Tengo una lista, y necesito que los elementos que estan dentro de la etiqueta "li" queden verticalmente, así: introducir la descripción de la imagen aquí

Mi lista esta actualmente así: introducir la descripción de la imagen aquí

Esta el codigo de mi lista :

ul {
  list-style: none;
}

li {
  display: inline;
  padding-left: 3px;
  padding-right: 3px;
}
<ul>
  <li>Número del pedido:<strong>15416</strong></li>
  <span class="separador">| </span>
  <li>Fecha:<strong>24 noviembre, 2022</strong></li>
  <span class="separador">| </span>
  <li>Total:<strong><span><bdi><span>&#x20a1;</span>40,937.00</bdi></span></strong></li>
  <span class="separador">| </span>
  <li>Método de pago:<strong>Transferencia bancaria directa</strong></li>
</ul>

5
  • Ponle un <br> después de cada titulillo, así: <li>Fecha:<br><strong>
    – masterguru
    Commented el 24 nov. 2022 a las 18:35
  • Ya intente lo del br y no funciona ya que baja todos elementos consecuentes, incluidos los siguientes li Commented el 24 nov. 2022 a las 18:37
  • Gracias por la aceptación de la respuesta, aún así espera a ver la de @Carlos (si es que la acaba poniendo), pues eso del display: flex es algo que no domino y quizás te puede servir mejor que mi respuesta, pues creo que tiene razón y algo se puede hacer con eso.
    – masterguru
    Commented el 24 nov. 2022 a las 18:53
  • 1
    Probaste definir cada li como display flex? crear dentro de cada li, 4 divs con un lenght de 20 a 24% y justify-content space evenly?
    – Carlos
    Commented el 24 nov. 2022 a las 19:05
  • @Carlos Tu comentario me parece interesante... ¿porque no lo aportas como respuesta con un ejemplo de como quedaría? Yo creo que vas bien encaminado (yo no dominio el flex aún) y mi única duda seria como pondrias la barra de separación después, pero supongo que con CSS lo podrás hacer.
    – masterguru
    Commented el 24 nov. 2022 a las 19:07

3 respuestas 3

2

Acá armé algo rapido, definiendo cada li como display:flex y creando un <div> dentro de cada li, y con justify-content: space-evenly, a ver que te parece:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .datos {
      height: 80%;
      display: flex;
      justify-content: space-evenly;
    }
    
    .datos li {
      padding-left: 5%;
      text-align: left;
      border-left: dashed darkgrey 1px;
    }
    
    .datos li:first-child {
      border-left: none;
    }
  </style>
</head>

<body>
  <ul class="datos">
    <li>
      <div>Número del pedido:<br><strong>15416</strong></div>
    </li>
    <li>
      <div>Fecha:<br><strong>24 noviembre, 2022</strong></div>
    </li>
    <li>
      <div>Total:<br><strong><span><bdi><span>&#x20a1;</span>40,937.00</bdi></span></strong></div>
    </li>
    <li>
      <div>Método de pago:<br><strong>Transferencia bancaria directa</strong></div>
    </li>

  </ul>

</body>

</html>

1
  • Me he tomado la libertad de poner tu código en un snippet para que lo pueda ejecutar aquí mismo y he agregado tu explicación de tu comentario para que la respuesta no sea tan solo de código sin más. Gracias por el aporte.
    – masterguru
    Commented el 24 nov. 2022 a las 21:05
0

Con un li lo veo complicado, pero esta respuesta se basa en una tabla, a ver si te convence:

td {
  padding-left: 3px;
  padding-right: 3px;
  border-right: 1px solid black;
}
<table>
  <tr>
    <td>Número del pedido:<br><strong>15416</strong></td>

    <td>Fecha:<br><strong>24 noviembre, 2022</strong></td>

    <td>Total:<br><strong><span><bdi><span>&#x20a1;</span>40,937.00</bdi></span></strong></td>

    <td>Método de pago:<br><strong>Transferencia bancaria directa</strong></td>
  </tr>
</table>

0
0

Podría ser así, dando un br al finalizar el titulo del concepto, y una alineación a la izquierda.

ul {
  list-style: none;
}

li {
  display: inline;
  /*espacio entre li de 10 pixeles*/
  padding:10px;
  /*alineacion a la izquierda*/
  float: left;
}
<ul>
  <li>Número del pedido: <span class="separador">| </span><br><strong>15416</strong></li>

  <li>Fecha: <span class="separador">| </span><br><strong>24 noviembre, 2022</strong></li>

  <li>Total: <span class="separador">| </span><br><strong><span><bdi><span>&#x20a1;</span>40,937.00</bdi></span></strong></li>

  <li>Método de pago:<br><strong>Transferencia bancaria directa</strong></li>
</ul>

Ejecútalo en tu navegador para que lo aprecies bien, dime si te sirvió.

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.