display：inline-table在iPhone4中不起作用

Question

在我的一个网页中，我需要显示两列。 我正在使用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;
}

任何帮助是极大的赞赏。

此致Praji

Answer 1

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

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

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