2

私が見るように頼まれたこのページ (以下のリンクを参照) では、UL#columns 内の 2 番目と 3 番目の 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');}

ここに画像の説明を入力

4

1 に答える 1

3

を使用float:leftしてdisplay:inline-block、削除するfloat:leftと、問題なく動作します。

を使用する代わりに、このようなものでinline-block使用できます！float:leftclearfix

IEを機能させるにはinline-block、これらの行を追加します。

*display : inline;
*zoom : 1;
于 2013-03-08T09:09:25.203 に答える