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 ff6d136ddc5fdfeffaf53ff6ee95f185 and 25edfb22a4f469ecb59f1190150159c6 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 25edfb22a4f469ecb59f1190150159c6 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 25edfb22a4f469ecb59f1190150159c6 element and specify the width of the 3499910bf9dac5ae3c52d5ede7383485 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!