How to achieve horizontal arrangement of ul and li in css-CSS Tutorial-php.cn

How to achieve horizontal arrangement of ul and li in css

王林

Release： 2020-03-30 09:21:28

forward

4620 people have browsed it

How to achieve horizontal arrangement of ul and li in css

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

Copy after login

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

Copy after login

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;

Copy after login

<!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>

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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!