①<li>使用浮动的方法，但是要用div包裹起来，该父元素需要设置宽度与高度：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery.js"></script> <style type="text/css"> .deo1 ul{ width:100%;/*这里设置为确定的值也可以*/ height:20px; background-color:yellow; } .deo1 ul li{ float:left; border:1px solid red; margin-right:8px; padding:0px; } </style> <script> $(function(){ }); </script> </head> <body> <div class="deo1"> <ul> <li><a href="###">这是1个</a></li> <li><a href="###">这是2个</a></li> <li><a href="###">这是3个</a></li> <li><a href="###">这是4个</a></li> <li><a href="###">这是5个</a></li> <li><a href="###">这是6个</a></li> <div class="clear"></div> </ul> </div> <div deo2>jfsdljfklsdjfds</div> </body> </html>
②不用设置ul的高度，使用class=clear清除浮动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery.js"></script> <style type="text/css"> ul{ width:80%; background-color:yellow; } ul li{ float:left; border:1px solid red; margin-right:8px; padding:0px; } .clear{ clear:both; } </style> <script> $(function(){ }); </script> </head> <body> <ul> <li><a href="###">这是1个</a></li> <li><a href="###">这是2个</a></li> <li><a href="###">这是3个</a></li> <li><a href="###">这是4个</a></li> <li><a href="###">这是5个</a></li> <li><a href="###">这是6个</a></li> <div class="clear"></div> </ul> <div deo2>jfsdljfklsdjfds</div> </body> </html>
③不使用浮动，而是使用display:inline-block,值得注意的是<li>之间会出现间距，解决的方法是：使用css的margin-right:-8px;或者<li>元素之间不要留有空格，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery.js"></script> <style type="text/css"> ul{ width:80%; background-color:yellow; } ul li{ display:inline-block; border:1px solid red; margin-right:-8px; padding:0px; } </style> <script> $(function(){ }); </script> </head> <body> <ul> <li><a href="###">这是1个</a></li> <li><a href="###">这是2个</a></li> <li><a href="###">这是3个</a></li> <li><a href="###">这是4个</a></li> <li><a href="###">这是5个</a></li> <li><a href="###">这是6个</a></li> </ul> <div deo2>jfsdljfklsdjfds</div> </body> </html>
或者把<li>元素放在一行
<li><a href="###">这是1个</a></li><li><a href="###">这是2个</a></li><li><a href="###">这是3个</a></li>