在此页面上,我被要求查看(请参阅下面的链接),UL#columns 内的第二个和第三个 LI 被向下推。
删除 default.css 第 61 行上的 clear:both
可以修复此问题。但是,我不清楚为什么。有什么想法吗?
#columns {width: 960px; clear: both; margin-top: 90px;}
#columns li {width: 290px; float: left; display: inline-block; background-position: center top; background-repeat: no-repeat; text-align: center; margin-right: 40px; opacity: 0;}
#columns li:nth-child(3) {margin-right: 0;}
#columns li h3 {font-size: 22px; color #33343d; display: block; clear: both; margin-top: 50px;}
#columns li P {color: #78797d; font-size: 15px; margin-top: 10px;}
#columns li.heart {background-image: url('../img/icons/heart.gif');}
#columns li.phone {background-image: url('../img/icons/phone.gif');}
#columns li.wheel {background-image: url('../img/icons/wheel.gif');}
最佳答案
您正在使用 float:left
和 display:inline-block
,删除 float:left
就可以正常工作了!
您可以将 float:left
与 clearfix
一起使用,而不是使用 inline-block
,例如 this one !
要使 IE 与 inline-block
配合使用,请添加以下行:
*display : inline;
*zoom : 1;
关于html - 第二、第三等水平子弹(LI)被向下推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15290253/