2

estoy creando tres listas que se posicionan una al lado de otra, el problema se presenta cuando el contenido de las lista no tiene la misma cantidad de elementos

introducir la descripción de la imagen aquí

como se puede apreciar en la imagen, la tercera lista tiene un titulo y dos elementos lo que me gustaría conseguir es alinear las listas.

aquí el html

<div class="contenedormenu">
    <ul>
        <p>Materiales de construcción</p>
        <li>Madera</li>
        <li>Cemento</li>
        <li>Fierros</li>
    </ul>
     <ul>
        <p>Herramientas</p>
        <li>Electricas</li>            
        <li>Herramientas de construccion</li>
        <li>Herramientas de jardin</li>       
    </ul>
    <ul>
        <p>Herramientas</p>
        <li>Electricas</li>
        <li>Ejemplo</li>
     </ul>
    </div>
  

css

.contenedormenu{
 width: 100%;
 height: 40%;
 background-color: grey;
 color: white
 }
.contenedormenu ul{
list-style: none;
display: inline-block;
}

2 respuestas 2

1

Alcanzaría con que:

  • A la clase contenedormenu le apliques una disposición flexible para que sus hijos sean cajas flexibles
  • Por cierto no considero que el título de cada una de tus listas deba formar parte del cuerpo del ul es decir no es un elemento de la lista en si
  • Puedes envolver cada una de las listas en un div nuevo darle una clase y así posteriormente incluso te será mas fácil maquetarlos

Propuesta

    <style>
      .contenedormenu {
        display: flex;
      }
      .listado {
        border: 1px solid;
      }
    </style>
    
    <div class="contenedormenu">
      <div class="listado">
          <p>Materiales de construcción</p>
          <ul>
              <li>Madera</li>
              <li>Cemento</li>
              <li>Fierros</li>
          </ul>
      </div>
      <div class="listado">
         <p>Herramientas</p>
         <ul>
            <li>Electricas</li>            
            <li>Herramientas de construccion</li>
            <li>Herramientas de jardin</li>       
        </ul>
      </div>
      <div class="listado">
        <p>Herramientas</p>
        <ul>
            <li>Electricas</li>
            <li>Ejemplo</li>
         </ul>
      </div>
    </div>
     

Con una salida así:

introducir la descripción de la imagen aquí

Lo del borde es opcional

0

El problema que presentas es por la forma que diseñas los datos, en efecto se baja debido a falta de un dato extra para alinearse al resto, ya que los datos se están apilando hacia abajo (aparte de que

por defecto es "display: block" haciendo que el siguiente elemento se apile hacia abajo), lo que puedes hacer es colocar "vertical-align: top" en ".contenedormenu ul".

Por otro lado: Disculpa, pero no es mas eficiente usar ? así se ajustan y aparte podrías editar a gusto el alineamiento de cada uno

 table{
      border: 1px solid black
    }
    th{
      border: 1px solid black
    }
    td{
      border: 1px solid black
    }
 <div>
      <table style="width:50%">
        <tr>
          <th>Materiales de construcción</th>
          <th>Herramientas</th>
          <th>Herramientas</th>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>94</td>
        </tr>
         <tr>
          <td>Eve</td>
          <td></td>
          <td>94</td>
        </tr>
      </table>
    </div>

Espero que te haya servido de ayuda :)

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.