{"id":1334,"date":"2024-08-01T18:58:43","date_gmt":"2024-08-01T16:58:43","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1334"},"modified":"2024-08-01T18:58:44","modified_gmt":"2024-08-01T16:58:44","slug":"43-barra-de-navegacion-css-2","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/43-barra-de-navegacion-css-2\/","title":{"rendered":"43. Barra de navegaci\u00f3n CSS (2)"},"content":{"rendered":"\n

Hay dos formas de crear una barra de navegaci\u00f3n horizontal. Uso de elementos de lista en l\u00ednea<\/strong> o uso de float<\/strong>.<\/p>\n\n\n\n\n\n\n\n

Elementos de lista en l\u00ednea<\/h2>\n\n\n\n

Una forma de construir una barra de navegaci\u00f3n horizontal es especificar los elementos <li><\/em><\/strong> como en l\u00ednea, adem\u00e1s del c\u00f3digo \u00abest\u00e1ndar\u00bb del cap\u00edtulo anterior.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      li {
        display: inline;
      }
    <\/style>
  <\/head>
  <body>
    <ul>
      <li><a href=\"#home\">Home<\/a><\/li>
      <li><a href=\"#news\">News<\/a><\/li>
      <li><a href=\"#contact\">Contact<\/a><\/li>
      <li><a href=\"#about\">About<\/a><\/li>
    <\/ul>
  <\/body>
<\/html><\/pre>\n\n\n\n
Ejm explicado<\/strong><\/p>\n\n\n\n
    \n
  • display: inline;<\/em><\/strong> – Por defecto, los elementos <li><\/em><\/strong> son elementos de bloque. Aqu\u00ed, eliminamos los saltos de l\u00ednea antes y despu\u00e9s de cada elemento de la lista para mostrarlos en una l\u00ednea.<\/li>\n<\/ul>\n\n\n\n
    Haciendo flotar \u00edtems de lista<\/h2>\n\n\n\n
    Otra forma de crear una barra de navegaci\u00f3n horizontal es hacer flotar los elementos <li><\/em><\/strong> y especificar un dise\u00f1o para los enlaces de navegaci\u00f3n.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
          }

          li {
            float: left;
          }

          li a {
            display: block;
            padding: 8px;
            background-color: #dddddd;
          }
        <\/style>
      <\/head>
      <body>
        <ul>
          <li><a href=\"#home\">Home<\/a><\/li>
          <li><a href=\"#news\">News<\/a><\/li>
          <li><a href=\"#contact\">Contact<\/a><\/li>
          <li><a href=\"#about\">About<\/a><\/li>
        <\/ul>
      <\/body>
    <\/html><\/pre>\n\n\n\n
    \n
    Nota<\/strong>: overflow:hidden<\/em><\/strong> se agrega al elemento ul<\/strong> para evitar que los elementos li<\/strong> salgan de la lista.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
    Hay dos formas de crear una barra de navegaci\u00f3n horizontal. Uso de elementos de lista en l\u00ednea o uso de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":42,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1334","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Hay dos formas de crear una barra de navegaci\u00f3n horizontal. Uso de elementos de lista en l\u00ednea o uso de […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1334"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1334\/revisions"}],"predecessor-version":[{"id":1336,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1334\/revisions\/1336"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}