1

次のコードはデスクトップでは問題なく動作しますが、モバイルでは右側にギャップが残ります。

ul{
width:100%;
}

li{
width:33.3333333333333%;
float:left;
}

img{
  width:100%;
}

<ul>
  <li><a href="#"><img src="img/men.jpg"/></a></li>
  <li><a href="#"><img src="img/women.jpg"/></a></li>
  <li><a href="#"><img src="img/kids.jpg"/></a></li>
</ul>

私もdisplay:tableを試してみましたが、さらに多くのギャップが残ります:(何かアイデアはありますか?

4

2 に答える 2

0

の幅は、<li>合計が100になるように設定する必要があります。合計が。になり99.9999999%ます。33%使用する最初の2つと、使用する最後の1つをスタイル設定します34%。

于 2013-02-27T22:29:46.843 に答える
0

display: block;css の img タグで使用してみましたか? ul タグと li タグでマージンとパディングが 0 に設定されていない可能性があります。

添付の jsfiddle を見て、それが問題の解決に役立つかどうかを確認してください。

http://jsfiddle.net/djy6V/

于 2013-02-28T00:01:28.933 に答える