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
There is a problem with this setting. After the li is floated, it is out of the text flow, that is, it does not take up space. If its parent element has a specific style and no fixed width and height, it is recommended that the parent element clear the float or set a fixed width and height

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.
*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>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