html - 显示：内联表在 iPhone4 中不起作用

Question

在我的一个网页中，我需要显示两列。我正在使用 UL 来显示列表。将样式 display:inline-table 与 li 一起使用时，它在 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;
}

任何帮助是极大的赞赏。

问候， 普拉吉

Answer 1

这是在黑暗中拍摄的，但我敢打赌 iPhone 有很好的 CSS3 支持：

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

.list-product-01 li
{
    display: block;
}​