How to set up horizontal navigation in css

Navigation Bar

Proficient use of the navigation bar is very important for any website.

Using CSS you can transform into a beautiful navigation bar instead of a boring HTML menu.

Navigation bar = link list

As the basis of standard HTML, a navigation bar is necessary.

The navigation bar is basically a list of links, so using the

and
• elements makes a lot of sense:

  <ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
  </ul>

  

  There are two ways to create a horizontal navigation bar. Use inline or float list items.

  Both methods are fine, but if you want links to have the same size, you have to use the float method.

  Inline list items

  One way to create a horizontal navigation bar is to specify the element,

  Instance

  li{
      display:inline;
  }

  display :inline; - By default, the

• element is a block element. Here we remove the newlines before and after each list item to display a single line.

  Floating list items

  In the above example the links have different widths.

  For all links to be of equal width, float the

• element and specify the width of the element:

  Example

  li{
      float:left;
  }
  a{
      display:block;
      width:60px;
  }

  float:left - use Slides of floating block elements next to each other

  display:block - displays links to block elements, making the whole clickable link area (not just the text), it allows us to specify the width

  width:60px - The maximum width of block elements by default. We want to specify a width of 60 pixels

  The above is the detailed content of How to set up horizontal navigation in css. For more information, please follow other related articles on the PHP Chinese website!