html - 第二，第三等水平子弹（LI）被推下

Question

在这个页面上，我被要求查看（参见下面的链接），UL#columns 中的第二个和第三个 LI 被推下。

删除clear:bothdefault.css 的第 61 行可修复此问题。但是，我不清楚为什么。有任何想法吗 ？

#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');}

Answer 1

您正在使用float:leftand display:inline-block，删除float:left它会正常工作！

而不是使用inline-block，你可以使用float:left一个clearfix这样的！

要使 IE 工作，inline-block请添加这些行：

*display : inline;
*zoom : 1;