{"id":37,"date":"2004-07-16T11:48:48","date_gmt":"2004-07-16T17:48:48","guid":{"rendered":"http:\/\/tonosdegris.com\/blog\/?p=37"},"modified":"2004-07-16T11:48:54","modified_gmt":"2004-07-16T17:48:54","slug":"css-listas-a-lo-ancho","status":"publish","type":"post","link":"https:\/\/www.tonosdegris.com\/blog\/2004\/07\/16\/css-listas-a-lo-ancho\/","title":{"rendered":"CSS – Listas a lo ancho"},"content":{"rendered":"

La tendencia actual al desarrollar páginas HTML es utilizar CSS.<\/p>\n

Con CSS, se debe crear el contenido de la página demarcado adecuadamente con etiquetas HTML, y el diseño de la página se obtiene dandole el estilo por medio de un archivo aparte.<\/p>\n

La manera más utilizada actualmente de crear menués es con una lista de enlaces y hacerla ver como un menu con CSS, pero una lista tiene sus limitaciones. Yo quise hacer que un menú generado por software por medio de listas utilizara todo el ancho de la página. Una lista no distribuye sus elementos a lo ancho de la lista, tal como lo hace una tabla, sino que los va agregando a la lista hasta llenar su ancho. La única manera de hacerlo era poner medidas estáticas a los elementos de la lista, pero al agregar otro elemento se corrín y quedaba desordenado. Así que tuve que encontrar una solución dinámica a mi problema.
\n<\/p>\n

Esta es una tabla con dos elementos:<\/p>\n\n\n
A<\/td>\nB<\/td>\n<\/tr>\n<\/table>\n

Esta es una lista con dos elementos:<\/p>\n

    \n
  • A<\/li>\n
  • B<\/li>\n<\/ul>\n

    Nótese que para evitar confusiones, el borde de la tabla es rojo mientras que el de la lista es negro.<\/p>\n

    Al quitar los marcadores a la lista y desplegarla en una línea, se ve similar a nuestra tabla:<\/p>\n

      \n
    • A<\/li>\n
    • B<\/li>\n<\/ul>\n

      Mi problema era que los elementos no son distribuidos a lo ancho de la lista, sino que esta agrupados al inicio, mientras que en la tabla, al darle un ancho fijo, los elementos se distribuyen dentro de la tabla para utilizar todo el ancho:<\/p>\n\n\n
      A<\/td>\nB<\/td>\n<\/tr>\n<\/table>\n

      Mi primera soluci&oacuten fue dar un ancho fijo a la lista, y utilizar medidas estáticas para distribuir los elementos a lo ancho:<\/p>\n

        \n
      • A<\/li>\n
      • B<\/li>\n<\/ul>\n

        Pero esta solución resultó ser ineficaz tan pronto se agregó otro elemento más por medio del software:<\/p>\n

          \n
        • A<\/li>\n
        • B<\/li>\n
        • C<\/li>\n<\/ul>\n

          Esto es lo que pasaría si el software generara una tabla en lugar de una lista, y de hecho, este es el efecto esperado:<\/p>\n\n\n
          A<\/td>\nB<\/td>\nC<\/td>\n<\/tr>\n<\/table>\n

          Se me ocurrió modificar el software para que generara una tabla en lugar de una lista, pero hubiera resultado más complicado. Especialmente al actualizar el software, ya que la nueva versión posiblemente volverá a generar este menú como listas, y tendría que volverlo a modificar. También esta la posibilidad de un cambio en el diseño de la página, y ahora el menú perdería todas las ventajas de ser creado como una lista. Así que preferí dejar esta opción como última.<\/p>\n

          Entonces decidí replantear mi problema. En lugar de pensar que mi problema es que la lista no distribuye sus elementos a lo ancho, empezar a pensarlo como la necesidad de que una lista se comporte como una tabla.<\/p>\n

          La tabla se comporta como lo hace, porque el navegador crea unas definiciones de estilo por defecto, en el caso de una tabla sencilla, serían las siguientes:
          \n
          \ntable { display: table }
          \ntr { display: table-row }
          \ntd { display: table-cell }
          \n<\/code>
          \n… y el estilo lo que me permite es modificar las definiciones por defecto de los diferentes elementos HTML utilizados en nuestras páginas, tal y como ya lo hice con la lista para que despliegue sus elementos en una sola línea un lugar de hacerlo en líneas aparte. Así que se me ocurrió quitar las medidas estáticas y probar lo siguiente:
          \n
          \nul { display: table }
          \nli { display: table-cell }
          \n<\/code>
          \n… y este fue el resultado:
          \nCon 2 elementos<\/p>\n

            \n
          • A<\/li>\n
          • B<\/li>\n<\/ul>\n

            Con tres elementos<\/p>\n

              \n
            • A<\/li>\n
            • B<\/li>\n
            • C<\/li>\n<\/ul>\n

              Así que esta es la manera sencilla de hacer que una lista horizontal despliegue sus elementos a lo ancho de la misma.<\/p>\n","protected":false},"excerpt":{"rendered":"

              La tendencia actual al desarrollar páginas HTML es utilizar CSS. Con CSS, se debe crear el contenido de la página demarcado adecuadamente con etiquetas HTML, y el diseño de la página se obtiene dandole el estilo por medio de un archivo aparte. La manera más utilizada actualmente de crear menués es con una lista de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,1,7],"tags":[],"_links":{"self":[{"href":"https:\/\/www.tonosdegris.com\/blog\/wp-json\/wp\/v2\/posts\/37"}],"collection":[{"href":"https:\/\/www.tonosdegris.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tonosdegris.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tonosdegris.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tonosdegris.com\/blog\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":0,"href":"https:\/\/www.tonosdegris.com\/blog\/wp-json\/wp\/v2\/posts\/37\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tonosdegris.com\/blog\/wp-json\/wp\/v2\/media?parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tonosdegris.com\/blog\/wp-json\/wp\/v2\/categories?post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tonosdegris.com\/blog\/wp-json\/wp\/v2\/tags?post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}