Most navigation bars are arranged horizontally as shown in the figure below, so how is this achieved? In fact, it mainly uses the horizontal arrangement of li in the <ul> tag. Here is an example to explain in detail how it is implemented.
1. Write a horizontal menu HTML code schema<ul id=menu> <li><a href=http://www.baidu.com>Baidu.Com</a></li> <li><a href=//www.VeVb.com>Jb51.net</a></li> <li><a href=http://www.yahoo.com>Yahoo.Com</a></li> <li><a href=http://www.google.com class=last>Google.Com</a></li></ul>2Writing CSS code
<1>Set the common style
<style type=text/css> #menu { font:12px verdana, arial, sans-serif; /* Set text size and font style*/ width: 100%; } #menu, #menu li { list-style:none; /* Remove the default list symbol */ padding:0; /* Remove the default inner margin */ margin:0; /* Remove the default outer margin */ float: left; /* Float to the left*/ display: block;}<2>Set link style
<style type=text/css> #menu li a { display:block; /* Set the link to a block-level element*/ width:150px; /* Set the width*/ height:30px; /* Set the height*/ line-height:30px; /* Set the line height, set the same value for the line height and height, so that a single line of text can be centered vertically*/ text-align:center; /* Center aligned text*/ background:#3A4953; /* Set the background color*/ color:#fff; /* Set the text color*/ text-decoration:none; /* Remove the underscore*/ border-right:1px solid #000; /* Add a divider on the left */}</style><3> Link hover effect
<style type=text/css> #menu li a:hover { background:#146C9C; /* Change background color*/ color:#ffff; /* Change text color*/ }</style><4> Remove the right box of the leftmost navigation bar
<style type=text/css> #menu li a.last { border-right:0; /* Remove the left border*/ }</style>3 Complete code
<!DOCTYPE html><html><head><meta charset=utf-8><title>Image prompt effect</title><script src=../jquery-3.3.1.min.js></script> <style type=text/css> #menu { font:12px verdana, arial, sans-serif; /* Set text size and font style*/ width: 100%; } #menu, #menu li { list-style:none; /* Remove the default list symbol */ padding: 0; /* Remove the default inner margin */ margin: 0; /* Remove the default outer margin */ float: left; /* Float left*/ display: block; } #menu li a { display:inline-block; /* Set the link to a block-level element*/ width:150px; /* Set the width*/ height:30px; /* Set the height*/ line-height:30px; /* Set the line height, set the same value to the line height and height, so that a single line of text can be centered vertically*/ text-align:center; /* Center aligned text*/ background:#3A4953; /* Set the background color*/ color:#fff; /* Set the text color*/ text-decoration:none; /* Remove the underline*/ border-right:1px solid #000; /* Add a divider on the left */ } #menu li a:hover { background:#146C9C; /* Change background color*/ color:#fff; /* Change text color*/ } #menu li a.last { border-right:0; /* Remove the left border*/ }</style> </head><body> <ul id=menu> <li><a href=http://www.baidu.com>Baidu.Com</a></li> <li><a href=//www.VeVb.com>Jb51.net</a></li> <li><a href=http://www.yahoo.com>Yahoo.Com</a></li> <li><a href=http://www.google.com class=last>Google.Com</a></li> </ul></body></html>Run online
Tip: You can modify some code first and then run it
In short, the most necessary thing to make it arrange horizontally is: the main style of the <ui> tag is display:balock;
The main style of <li> is display:inline-balock,float:left,list-style:none;
This is the article about the implementation example of li horizontal arrangement in tags in HTML. For more related HTML li horizontal arrangement content, please search the previous articles of Wulin.com or the following related articles. I hope everyone will support Wulin.com in the future!