Two ways to achieve horizontal arrangement of ul and li using CSS
|
Because li is a block-level element and occupies one line by default, if you want to achieve horizontal arrangement, you can generally use the following two methods: float:left display:inline-block That is, turn li into an inline element and set the width, height and margins. This also has a problem. Lower versions of IE browsers are not compatible with inline-block. It is recommended to add two more attributes after it to be compatible with lower versions of IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Two methods of horizontal arrangement of CSS + ul li</title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
</ul>
</div>
</body>
</html>CSS code 1:
* {
margin: 0;
border: 0;
padding: 0;
font-size: 13pt;
}
#nav {
height: 40px;
border-top: #060 2px solid;
border-bottom: #060 2px solid;
background-color: #690;
}
#nav ul {
list-style: none;
margin-left: 50px;
}
#nav li {
display: inline;
line-height: 40px;
float:left
}
#nav a {
color: #fff;
text-decoration: none;
padding: 20px 20px;
}
#nav a:hover {
background-color: #060;
}
CSS code 2:
* {
margin: 0;
border: 0;
padding: 0;
font-size: 13pt;
}
#nav {
height: 40px;
border-top: #060 2px solid;
margin-top: 100px;
border-bottom: #060 2px solid;
background-color: #690;
}
#nav ul {
list-style: none;
line-height: 40px;
margin-left: 50px;
}
#nav li {
display: block;
float: left;
}
#nav a {
display: block;
color: #fff;
text-decoration: none;
padding: 0 20px;
}
#nav a:hover {
background-color: #060;
}
This concludes this article on two methods of implementing ul and li horizontal arrangement with CSS. For more information on implementing ul and li horizontal arrangement with CSS, please search 123WORDPRESS.COM’s previous articles or the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: HTML tag default style arrangement
>>: Using Zabbix to monitor the operation process of Oracle table space
Recommend
How to use cookies to remember passwords for 7 days on the vue login page
Problem Description In the login page of the proj...
Sample code for implementing form validation with pure CSS
In our daily business, form validation is a very ...
How to change the tomcat port number in Linux
I have several tomcats here. If I use them at the...
How to clear the validation prompt in element form validation
Table of contents Problem scenario: Solution: 1. ...
Does Mysql ALTER TABLE lock the table when adding fields?
Table of contents Before MySQL 5.6 After MySQL 5....
Tomcat server security settings method
Tomcat is an HTTP server that is the official ref...
HTML 5 Preview
<br />Original: http://www.alistapart.com/ar...
MySQL Community Server 5.6 installation and configuration tutorial under Windows 8
This article records the installation and configu...
Detailed explanation of MySQL transaction isolation level and MVCC
Table of contents Transaction Isolation Level Pro...
How to use Greek letters in HTML pages
Greek letters are a very commonly used series of ...
Native JS to implement the aircraft war game
This article example shares the specific code of ...
Semanticization of HTML tags (including H5)
introduce HTML provides the contextual structure ...
About using Alibaba's iconfont vector icon in Vue
There are many import methods on the Internet, an...
Detailed steps for porting busybox to build a minimal root file system
Busybox: A Swiss Army knife filled with small com...
How to quickly install tensorflow environment in Docker
Quickly install the tensorflow environment in Doc...