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
Recommend
Operations of communication between Docker containers and external network communication
Communication between containers 1. Network shari...
Install mysql 5.6 from yum source in centos7.4 system
System environment: centos7.4 1. Check whether th...
A brief discussion on where the token generated by node using jwt should be stored
A: Usually stored in the client. jwt, or JSON Web...
Mysql sets boolean type operations
Mysql sets boolean type 1. Tinyint type We create...
Solve the problem of no my.cnf file in /etc when installing mysql on Linux
Today I wanted to change the mysql port, but I fo...
Linux uses suid vim.basic file to achieve privilege escalation
Reproduce on Kali First set suid permissions for ...
Realize super cool water light effect based on canvas
This article example shares with you the specific...
Detailed explanation of location and rewrite usage in nginx
1. Summary of location usage Location can locate ...
Detailed explanation of the implementation example of group ranking in Mysql tutorial
Table of contents 1. Data Source 2. Overall ranki...
Analysis of the reasons why Vue3 uses Proxy to implement data monitoring
Vue data two-way binding principle, but this meth...
Bootstrap FileInput implements image upload function
This article example shares the specific code of ...
Solution for importing more data from MySQL into Hive
Original derivative command: bin/sqoop import -co...
Docker volume deletion operation
prune To use this command, both the client and da...
Two ways to prohibit clearing the input text input cache in html
Most browsers will cache input values by defaul...
Free tool to verify that HTML, CSS and RSS feeds are correct
One trick for dealing with this type of error is t...