本文主要是介绍CSS + ul li 横向排列的两种方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!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代码一：
* {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;
}
这篇关于CSS + ul li 横向排列的两种方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
