The li in the

The first step is to write the HTML code structure of the horizontal menu

Please add the following code to the navigation bar area of ​​the HTML document.

 
• Baidu.Com
 
• Code52.Net
 
• Yahoo.Com
 
• Google.Com

The second step is to write CSS code

1. Set the public style

Please add the following CSS code to In the

... tag range of the HTML document.

<style>
#menu { 
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
}
</style>

As we all know, each item

in

is arranged vertically by default. We need to define CSS to arrange it horizontally.

Tips: Because we are now pulling out the navigation bar to explain it independently, we need to set some public styles. If you have reset the default effect in the body or elsewhere, the above code can be removed.

2. Let the text be arranged horizontally

As we all know, the items under the

label
• are arranged vertically by default. We need to define additional CSS property to align it horizontally.

  <style>
  #menu li { 
  float:left; /* 往左浮动 */
  }
  </style>

  3, Set the link style:

  <style>
  #menu li a {
  display:block; /* 将链接设为块级元素 */
  padding:8px 50px; /* 设置内边距 */
  background:#3A4953; /* 设置背景色 */
  color:#fff; /* 设置文字颜色 */
  text-decoration:none; /* 去掉下划线 */
  border-right:1px solid #000; /* 在左侧加上分隔线 */
  }
  </style>

  We use inner margins (i.e. padding) to make each menu wider. If you The menu is a mix of Chinese and English. It is recommended to set the height and width of a single menu to avoid height errors caused by inconsistent line heights of Chinese and English characters. Method of setting fixed height:

  <style>
  #menu li a {
  display:block; /* 将链接设为块级元素 */
  width:150px; /* 设置宽度 */
  height:30px; /* 设置高度 */
  line-height:30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
  text-align:center; /* 居中对齐文字 */
  background:#3A4953; /* 设置背景色 */
  color:#fff; /* 设置文字颜色 */
  text-decoration:none; /* 去掉下划线 */
  border-right:1px solid #000; /* 在左侧加上分隔线 */
  }
  </style>

  4. Link hover effect:

  Through the combined effect of the above steps, a preliminary framework of a horizontal navigation bar appears. . This step is mainly to define the hover effect of the link to make the navigation bar more beautiful. Of course, if you want to make the navigation bar more dazzling, you can define a background image on the CSS hover property.

  <style>
  #menu li a:hover {
  background:#146C9C; /* 变换背景色 */
  color:#fff; /* 变换文字颜色 */
  }
  </style>

  There is a flaw in the code here. There will be an extra border on the far right. Since the :first-child pseudo-class is not supported by the IE series browsers, we can only write a separate style to remove the last border. , and add an extra selector to the HTML code.

  • Baidu.Com
  • Code52.Net
  • Yahoo.com
  • Google.com

  Okay, now a simple horizontal navigation menu has been created. Isn’t it very simple? The complete code is given below:

  <style>
  #menu { 
   font:12px verdana, arial, sans-serif; 
  }
  #menu, #menu li {
   list-style:none;
   padding:0;
   margin:0;
  }
  #menu li { 
   float:left; 
  }
  #menu li a {
   display:block;
   /* 如果是中英文混排的文字，建议用固定宽度
   width:150px;
   height:30px;
   line-height:30px;
   text-align:center;
   */
   padding:8px 50px;
   background:#3A4953;
   color:#fff;
   text-decoration:none;
   border-right:1px solid #000;
  }
  #menu li a:hover {
   background:#146C9C;
   color:#fff;
   text-decoration:none;
   border-right:1px solid #000;
  }
  #menu li a.last {
   border-right:0; /* 去掉左侧边框 */
  }
  </style>

  You can view the online demo we produced and download the example package provided in this article.

  I modified the above CSS style. As follows:

The above is the detailed content of The li in the

tag in HTML is arranged horizontally. For more information, please follow other related articles on the PHP Chinese website!