0

私の 1 つの Web ページでは、2 つの列を表示する必要があります。ULを使用してリストを表示しています。li でスタイル display:inline-table を使用している場合、iPhone4 では動作しません。iphone3では問題なく動作しています。

Expected output
Test1      Test2
Test3      Test4
Test5      Test6

しかし、iPhone 4では次のようになります

Test1
Test2
Test3
Test4
Test5
Test6

私のHtmlはこのようなものです

<div class="AccordinDiv" ><ul class="list-product-01">
<li>
<a href="/instant/114_117/114_117-1041.html/">
Test1</a>
</li>
<li>
<a href="/instant/114_117/114_117-1042.html/">
Test2</a>
</li>
<li>
<a href="/instant/114_117/114_117-1043.html/">
Test3</a>
</li>
<li>
<a href="/instant/114_117/114_117-1044.html/">
Test4</a>
</li>
<li>
<a href="/instant/114_117/114_117-1045.html/">
Test5</a>
</li>
<li>
<a href="/instant/114_117/114_117-1046.html/">
Test6</a>
</li>
</ul></div>

以下のスタイルを使用しました

ul.list-product-01
{
width: 100%;
text-align: center;
display: inline;
}

.list-product-01 li
{
text-align: center;
display: inline-table;
padding: 5px 0px 5px 3px;
width: 30%;
vertical-align: top;
font-size: 10px;
margin: 0px;
}

どんな助けでも大歓迎です。

よろしく、 プラジ

4

1 に答える 1

0

これは暗闇の中のショットですが、iPhone はかなり優れた CSS3 サポートを備えているに違いありません。

ul.list-product-01
{
    width: 100%;
    -webkit-column-count: 2;
    column-count: 2;
}

.list-product-01 li
{
    display: block;
}​
于 2012-08-17T02:50:03.447 に答える