Home >Web Front-end >HTML Tutorial >chrome浏览器li使用float:left错位的情况_html/css_WEB-ITnose
在IE下都正常,没有任何问题,但是在chrome(版本 45.0.2454.85 m)下却出现这样错位的情况,找不到是什么原因造成的。
假如不用float:left,从第5个li开始,也会有空白的情况,有谁遇到过这种情况,是什么原因引起的?
以下是代码:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>chrome浏览器li出现空白错位</title><style type="text/css">*{margin:0;padding:0}li{list-style:none;}a{color:#333; text-decoration: none;}.main{width:980px;margin:0 auto;overflow:hidden;}.link ul{overflow:hidden;}.link li{float:left;line-height:28px;height:28px;overflow:hidden;background-color:#ccc;font-size:12px;padding:0 12px;}</style></head><body><div class="main"><div class="link"> <ul> <li><a href="#" target="_blank">合肥文明网</a></li> <li><a href="#" target="_blank">淮北文明网</a></li> <li><a href="#" target="_blank">亳州文明网</a></li> <li><a href="#" target="_blank">宿州文明网</a></li> <li><a href="#" target="_blank">蚌埠文明网</a></li> <li><a href="#" target="_blank">阜阳文明网</a></li> <li><a href="#" target="_blank">淮南文明网</a></li> <li><a href="#" target="_blank">滁州文明网</a></li> <li><a href="#" target="_blank">马鞍山文明网</a></li> <li><a href="#" target="_blank">芜湖文明网</a></li> <li><a href="#" target="_blank">宣城文明网</a></li> <li><a href="#" target="_blank">铜陵文明网</a></li> <li><a href="#" target="_blank">池州文明网</a></li> <li><a href="#" target="_blank">安庆文明网</a></li> <li><a href="#" target="_blank">黄山文明网</a></li> <li><a href="#" target="_blank">歙县文明网</a></li> <li><a href="#" target="_blank">祁门文明网</a></li> <li><a href="#" target="_blank">休宁文明网</a></li> <li><a href="#" target="_blank">黟县文明网</a></li> <li><a href="#" target="_blank">黄山区文明网</a></li> <li><a href="#" target="_blank">包河文明网</a></li> <li><a href="#" target="_blank">肥西文明网</a></li> <li><a href="#" target="_blank">蜀山文明网</a></li> <li><a href="#" target="_blank">庐江文明网</a></li> <li><a href="#" target="_blank">颍上文明网</a></li> <li><a href="#" target="_blank">阜南文明网</a></li> <li><a href="#" target="_blank">鸠江区文明网</a></li> <li><a href="#" target="_blank">弋江区文明网</a></li> <li><a href="#" target="_blank">芜湖县文明网</a></li> <li><a href="#" target="_blank">宁国市文明网</a></li> <li><a href="#" target="_blank">绩溪文明网</a></li> <li><a href="#" target="_blank">凤台文明网</a></li> <li><a href="#" target="_blank">大通文明网</a></li> <li><a href="#" target="_blank">田家庵区文明网</a></li> <li><a href="#" target="_blank">怀远文明网</a></li> <li><a href="#" target="_blank">桐城文明网</a></li> <li><a href="#" target="_blank">怀宁文明网</a></li> <li><a href="#" target="_blank">望江文明网</a></li> <li><a href="#" target="_blank">涡阳文明网</a></li> <li><a href="#" target="_blank">蒙城文明网</a></li> <li><a href="#" target="_blank">宣州区文明网</a></li> <li><a href="#" target="_blank">六安文明网</a></li> <li><a href="#" target="_blank">铜陵县文明网</a></li> <li><a href="#" target="_blank">贵池区文明网</a></li> <li><a href="#" target="_blank">铜官山区文明网</a></li> <li><a href="#" target="_blank">毛集文明网</a></li> <li><a href="#" target="_blank">长丰文明网</a></li> <li><a href="#" target="_blank">肥东文明网</a></li> <li><a href="#" target="_blank">濉溪文明网</a></li> <li><a href="#" target="_blank">潘集区文明网</a></li> <li><a href="#" target="_blank">利辛文明网</a></li> <li><a href="#" target="_blank">泾县文明网</a></li> <li><a href="#" target="_blank">广德文明网</a></li> <li><a href="#" target="_blank">来安文明网</a></li> <li><a href="#" target="_blank">明光文明网</a></li> <li><a href="#" target="_blank">宿松文明网</a></li> <li><a href="#" target="_blank">南谯区文明网</a></li> <li><a href="#" target="_blank">定远文明网</a></li> <li><a href="#" target="_blank">南陵文明网</a></li> <li><a href="#" target="_blank">凤阳文明网</a></li> <li><a href="#" target="_blank">琅琊区文明网</a></li> <li><a href="#" target="_blank">临泉文明网</a></li> <li><a href="#" target="_blank">颍东区文明网</a></li> <li><a href="#" target="_blank">颍州区文明网</a></li> <li><a href="#" target="_blank">全椒文明网</a></li> <li><a href="#" target="_blank">天长文明网</a></li> <li><a href="#" target="_blank">巢湖文明网</a></li> <li><a href="#" target="_blank">镜湖区文明网</a></li> <li><a href="#" target="_blank">太和文明网</a></li> <li><a href="#" target="_blank">当涂文明网</a></li> <li><a href="#" target="_blank">和县文明网</a></li> <li><a href="#" target="_blank">泗县文明网</a></li> <li><a href="#" target="_blank">砀山文明网</a></li> <li><a href="#" target="_blank">?桥文明网</a></li> <li><a href="#" target="_blank">界首市文明网</a></li> <li><a href="#" target="_blank">颍泉区文明网</a></li> <li><a href="#" target="_blank">芜湖经开区文明网</a></li> <li><a href="#" target="_blank">岳西文明网</a></li> <li><a href="#" target="_blank">霍山文明网</a></li> </ul></div></div></body></html>
你把每一个li后面的空格删掉,全都是被这个空格引起的
你把每一个li后面的空格删掉,全都是被这个空格引起的
你把每一个li后面的空格删掉,全都是被这个空格引起的
你把每一个li后面的空格删掉,全都是被这个空格引起的
你把每一个li后面的空格删掉,全都是被这个空格引起的