我给li都加了浮动为什么没效果呢？为什么还是上下排列的？ <!DOCTYPE ht
我给li都加了浮动为什么没效果呢？为什么还是上下排列的？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> * { margin: 0; padding: 0 } #main,#one,#two,#three, li{list-style-type: none;float:left;display:block;height:30px;width:50px;text-align:center;line-height:30px;background:blue;} </style> <script> </script> </head> <body> <div> <ul id="main"> <li>北京</li> <li>河北</li> <li>山东</li> </ul> <ul id="one"> <li>宣武</li> <li>西城</li> <li>东城</li> </ul> <ul id="two"> <li>石家庄</li> <li>保定</li> <li>唐山</li> </ul> <ul id="two"> <li>淄博</li> <li>济南</li> <li>青岛</li> </ul> </div> </body> </html>
这个样式中设定了宽度,width:50px ,#main,#one,#two,#three这三个是ul也是这个宽度 所以就出现了这个问题 你把li的宽度单独写就可以了
#main,#one,#two,#three, li{list-style-type: none;float:left;display:block;height:30px;text-align:center;line-height:30px;background:blue;}
li {width:50px;}本回答被提问者和网友采纳
