Heim >Web-Frontend >HTML-Tutorial >ul li 横排(float:left) ie6多出间距_html/css_WEB-ITnose

ul li 横排(float:left) ie6多出间距_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:28:121487Durchsuche

<!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><style type="text/css">	.list{width:700px; overflow:hidden; border:solid 1px blue; padding:20px; }	ul,li {margin:0; padding:0; list-style:none}	ul{border:solid 1px green; display:inline-block; background:#d5d5d5; width:100%;}	li{width:250px; height:150px; border:solid 1px red; float:left; margin:15px 0 15px 50px;}</style><title>无标题文档</title></head><body><div class="list">	<ul>		<li>dsdddddddddddddddddddddd</li>		<li>dsdddddddddddddddddddddd</li>		<li>dsdddddddddddddddddddddd</li>		<li>dsdddddddddddddddddddddd</li>		<li>dsdddddddddddddddddddddd</li>	</ul>	<div style="clear:both"></div></div></body></html>


li通过float:left 横排后,ie6中所有的li会距离ul内左边多一倍左右的距离,怎么消除??


回复讨论(解决方案)

给li设置一个display:inline

或者不使用margin,使用padding代替。再或者,不使用浮动。使用inline-block布局。

可以搜索:IE6双外边距的bug,查看一下相关的内容。

因为浮动ie6会产生双倍bug,给ie6加个_display:inline

.list{width:700px; overflow:hidden; border:solid 1px blue; padding:20px; }

去掉你的padding

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn