{"id":720,"date":"2009-12-06T11:22:00","date_gmt":"2009-12-06T14:22:00","guid":{"rendered":"http:\/\/aleare.com.ar\/web\/utilizando-las-listas-de-definicion-dd\/"},"modified":"2025-10-25T19:33:52","modified_gmt":"2025-10-25T22:33:52","slug":"como-utilizar-las-listas-de-definicion-dl","status":"publish","type":"post","link":"https:\/\/aleare.com.ar\/blog\/como-utilizar-las-listas-de-definicion-dl\/","title":{"rendered":"C\u00f3mo utilizar las Listas de Definici\u00f3n (DL)"},"content":{"rendered":"
<\/div>

Hoy les voy a contar algo que me pas\u00f3 utilizando las Listas de Definici\u00f3n (DL) en mi c\u00f3digo HTML. A menudo, utilizo el tag <UL> para modular todo lo que sea contenido en listas o bloques similares, horizontales o verticales. Hace poco le\u00ed un art\u00edculo en CSS-Tricks<\/span><\/a>\u00a0donde se hablaba de las bondades de las Definition List<\/span> (DL<\/b>) o Lista de Definici\u00f3n<\/span>, de las cuales s\u00f3lo hab\u00eda visto aplicadas en dos o tres ocasiones, revisando c\u00f3digo ajeno, y nunca entend\u00ed bien su objetivo. Hasta hoy.<\/p>\n

Veamos entonces, qu\u00e9 nos ofrece de bueno.<\/p>\n

Parecido, pero no tanto<\/h2>\n

La DL<\/b> es casi como la famosa UL<\/b>, pero con una estructura m\u00e1s sencilla, adem\u00e1s nos permite configurar un Header y un Footer con estilos diferentes al resto de las l\u00edneas. Similar a una tabla.<\/p>\n

Pongamos como ejemplo lo siguiente:<\/p>

\u0421ollaborator<\/a><\/div><\/div>\n

\"HTML,<\/p>\n

Los DD<\/span> se desplazan autom\u00e1ticamente unos p\u00edxeles hacia la derecha para crear una jerarqu\u00eda entre \u00e9stos y los DT<\/span>. Los DT vendr\u00edan a ser los t\u00edtulos de cada grupo, son los de mayor jerarqu\u00eda. Los DD dependen de cada DT. Y despu\u00e9s tenemos el LH, que cumple la funci\u00f3n de encabezado, y el LF, l\u00ednea final o footer del DL. Una estructura con jerarqu\u00edas que se asemeja m\u00e1s a una TABLE<\/strong> dir\u00eda yo.<\/p>\n

 <\/p>\n

Experimentando con DL<\/h2>\n

Me anim\u00e9 a utilizar una DL<\/span> para configurar un DIV en el que ten\u00eda un t\u00edtulo, dos l\u00edneas arriba y dos abajo con combos y un input, y funcion\u00f3 bien. Salvo por un problema que encontramos en IE<\/span> (cu\u00e1ndo no…), que agregaba un margen al pie del recuadro que durante un buen rato nos tuvo a todo el equipo investigando.<\/p>\n

Utilizamos la vieja y conocida t\u00e9cnica de agregar backgrounds de colores estridentes (rojo, amarillo, verde, etc.) a cada elemento para ver su comportamiento. Ah\u00ed nos dimos cuenta que IE produce un bug que te agrega una l\u00ednea adicional al final de la lista. Algo as\u00ed como un footer. No me pregunten por qu\u00e9 hace esto, pero lo resolvimos agregando un DD adicional al final, con un estilo inline. As\u00ed:<\/p>\n

\"HTML,<\/p>\n

… Y santo remedio. La lista se qued\u00f3 con sus cuatro \u00edtems en su lugar. El c\u00f3digo result\u00f3 v\u00e1lido. Y yo aprend\u00ed algo nuevo. Busqu\u00e9 referencias a este problema en particular, pero no encontr\u00e9 nada, ni en ingl\u00e9s ni espa\u00f1ol ni chino. Supongo que se trata de un bug que se solucionar\u00e1 con las pr\u00f3ximas versiones. Shit happens, code bugs too<\/em>. \ud83e\udd37\ud83c\udffb\u200d\u2640\ufe0f<\/p>\n

Te puede interesar:<\/em>
\nTirame un centro: c\u00f3mo centrar un DIV con HTML y CSS<\/a><\/strong><\/em><\/div>\n

En conclusi\u00f3n: un DL<\/b> bien aplicado y con buen uso de CSS<\/span><\/a> hace maravillas. \u00a1Espero que les sea \u00fatil para sus c\u00f3digos!<\/p>\n

.<\/span><\/p>\n

\"Abre<\/a><\/div><\/div>