Example of horizontal arrangement of li tags in HTMl

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. The following example explains in detail how it is implemented.

1Write the HTML code structure of the horizontal menu

<ul id="menu">
 <li><a href="http://www.baidu.com">Baidu.Com</a></li>
 <li><a href="//www.jb51.net">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>

2. Write CSS code

<1>Set common styles

<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 padding*/
        margin:0; /* Remove the default 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 width */
        height:30px; /* set the height */
        line-height:30px; /* Set the line height. Setting the line height and height to the same value can vertically center a single line of text*/
        text-align:center; /* Center the text */
        background:#3A4953; /* Set background color */
        color:#fff; /*Set text color*/
        text-decoration:none; /* remove underline*/
        border-right:1px solid #000; /* Add a separator line on the left */
}
</style>

<3>Link hover effect

<style type="text/css">
    #menu li a:hover {
    background:#146C9C; /* Change background color*/
    color:#fff; /* Change text color*/
    }
</style>

<4>Remove the right border 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 padding*/
            margin:0; /* Remove the default margin*/
            float: left; /* float to the left */
            display: block;
        }
        #menu li a {
            display:inline-block; /* Set the link as a block-level element */
            width:150px; /* set width */
            height:30px; /* set the height */
            line-height:30px; /* Set the line height. Setting the line height and height to the same value can vertically center a single line of text*/
            text-align:center; /* Center the text */
            background:#3A4953; /* Set background color */
            color:#fff; /*Set text color*/
            text-decoration:none; /* remove underline*/
            border-right:1px solid #000; /* Add a separator line 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.jb51.net">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>

Online operation

Tip: You can modify some of the code before running

In short, the most important thing to make it arranged horizontally is: the main style of the <ui> tag is display:balock;

The main styles of <li> are display:inline-barlock,float:left,list-style:none;

This is the end of this article about the implementation example of horizontal arrangement of li in HTML tags. For more relevant HTML li horizontal arrangement content, please search 123WORDPRESS.COM’s previous articles or the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: JavaScript implements cool mouse tailing effects

>>: Simple CSS text animation effect