Home > Article > Web Front-end > How to achieve horizontal arrangement of ul and li in css
How to achieve horizontal arrangement of ul and li in css
- 王林forward
- 2020-03-30 09:21:284475browse
Because li is a block-level element and occupies one line by default. To achieve horizontal arrangement, the following two methods are generally used:
float:left
There is a problem with this setting. After li is floated, it is separated from the text flow, that is, it does not occupy any position. If its parent element has a specific style and does not have a fixed width and height, it is recommended that the parent element clear its float or set a fixed width and height.
display:inline-block
That is to say, turning li into an inline element and setting the width, height and margins also has a problem. Lower versions of Ie browsers are not compatible with inline-block. It is recommended to add two attributes after it for compatibility. Low version ie
(recommended tutorial: CSS introductory tutorial)
*display:inline; *zoom:1;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>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 one:
* {
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 two:
* {
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;
}Recommended related video tutorials: css video tutorial
The above is the detailed content of How to achieve horizontal arrangement of ul and li in css. For more information, please follow other related articles on the PHP Chinese website!