{"id":160,"date":"2022-11-30T20:38:46","date_gmt":"2022-11-30T20:38:46","guid":{"rendered":"https:\/\/javigomez.org\/?p=160"},"modified":"2025-09-29T20:34:20","modified_gmt":"2025-09-29T20:34:20","slug":"menu-horizontal-con-flex-utilizando-ul","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2022\/11\/30\/menu-horizontal-con-flex-utilizando-ul\/","title":{"rendered":"Men\u00fa horizontal con flex (utilizando ul)"},"content":{"rendered":"\n

Con el siguiente c\u00f3digo se puede construir un men\u00fa horizontal en la parte superior de una p\u00e1gina. Se utiliza <ul> y <li> para construirlo. con el comando list-style: none, se elimina los bullets de la lista, y a partir de ah\u00ed, se sit\u00faa con flex los elementos en la parte superior.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<!doctype html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>U2_06<\/title>\n<style>\n  ul{\n    display:flex;\n    justify-content: space-between;\n    gap: 2px;\n    padding:0;\n    list-style: none;<\/strong>\n  }  \n  ul li{\n    background: rgba(123,198,199,0.8);\n    flex-grow: 1;\n  }\n  ul a, ul a:link{\n    font-family: sans-serif;\n    text-decoration: none;\n    color: black;\n    padding: 8px;\n    display:block;\n    width:100%;\n  }\n<\/style>\n<\/head>\n<body>\n  <ul>\n    <li><a href=\"#\">Home<\/a><\/li>\n    <li><a href=\"#\">Servicios<\/a><\/li>\n    <li><a href=\"#\">Opciones<\/a><\/li>\n    <li><a href=\"#\">Planes<\/a><\/li>\n    <li><a href=\"#\">Contacto<\/a><\/li>\n  <\/ul>\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Con el siguiente c\u00f3digo se puede construir un men\u00fa horizontal en la parte superior de una p\u00e1gina. Se utiliza <ul> y <li> para construirlo. con … <\/p>\n","protected":false},"author":1,"featured_media":161,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[153,220,222,229,337],"class_list":["post-160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-flex","tag-li","tag-list-style","tag-menu","tag-ul"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/comments?post=160"}],"version-history":[{"count":1,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/160\/revisions"}],"predecessor-version":[{"id":974,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/160\/revisions\/974"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media\/161"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}