Home > Web Front-end > CSS Tutorial > How to achieve horizontal arrangement of ul and li in css

How to achieve horizontal arrangement of ul and li in css

王林
Release: 2020-03-30 09:21:28
forward
4609 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!

Related labels:
source:jb51.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template