Skip to content

Instantly share code, notes, and snippets.

@pateketrueke
Created February 2, 2018 17:52
Show Gist options
  • Save pateketrueke/0930fec5e2a16958df2ec3fadd979d65 to your computer and use it in GitHub Desktop.
Save pateketrueke/0930fec5e2a16958df2ec3fadd979d65 to your computer and use it in GitHub Desktop.
Una lista de definiciones, el drama.

Problema

Dada la lista de definiciones de abajo:

<dl>
  <dt>x</dt>
  <dd>a</dd>
  <dd>b</dd>

  <dt>y</dt>
  <dd>c</dd>

  <dt>z</dt>
  <dd>d</dd>
</dl>

Parte 1

  • Los títulos dt deben mostrarse a la izquierda
  • Las descripciones dd deben mostrarse a la derecha

El resultado visual debe mostrarse como una tabla, títulos de un lado, descripciones al otro.

Parte 2

  • Alinear los títulos dt verticalmente con relación a la fila que les corresponde

Como referencia, una tabla estándar cumple con la estructura visual: https://jsfiddle.net/tpfyoLqg/

El problema es mantener la misma estructura semántica sin cambios (o adiciones innecesarias) y alcanzar la misma estructura visual.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment