How to make a horizontal navigation bar in css

The steps to create a horizontal navigation bar using CSS are as follows: Create an HTML navigation structure. Apply CSS styles: layout container: display: flex; justify-content: center; align-items: center; style list: display: flex; list-style-type: none; margin: 0; padding: 0; style list items: margin-right: 1em; style link: text-decoration: none; color: black; mouseover state: a:hov

##How to use Creating a horizontal navigation bar with CSS

Creating a horizontal navigation bar is a common requirement for most website designs. Using CSS, this can be easily achieved by following these steps:

Create HTML structure:

<code class="html"><nav>
  <ul>
    <li><a href="home.html">主页</a></li>
    <li><a href="about.html">关于</a></li>
    <li><a href="contact.html">联系</a></li>
  </ul>
</nav></code>

Apply CSS styles:

1. Layout container:

<code class="css">nav {
  display: flex;
  justify-content: center;
  align-items: center;
}</code>

• display: flex Allows the navigation bar to become a horizontally arranged container.
• justify-content: center Center its content horizontally.
• align-items: center Center its content vertically.

2. Style list:

<code class="css">ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}</code>

• display: flex Also converts the list to a horizontal container.
• list-style-type: none Remove bullets.
• margin: 0 and padding: 0 remove default spacing and padding.

3. Style list items:

<code class="css">li {
  margin-right: 1em;
}</code>

• margin-right: 1em Add between each list item Some spacing.

4. Style link:

<code class="css">a {
  text-decoration: none;
  color: black;
}</code>

• text-decoration: none Remove link underline.
• color: black Set the link text to black.

5. Mouse hover state:

<code class="css">a:hover {
  color: blue;
}</code>

• a:hover Set when the mouse is hovering over a link Text color is blue.

Result:

Following these steps will create a horizontal navigation bar where items are arranged horizontally with each other, centered on the screen. The link text turns blue when you hover over it.

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