html li ul 横排_CSS + ul li 横向排列的两种方法

CSS + ul li 横向排列的两种方法

• superbirds
• superbirds
• superbirds
• superbirds

CSS代码一：

* {

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代码二：

* {

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;

}