The li in the

tag in HTML is arranged 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.

  3,Set the link 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:

  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.

  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:

  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!