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

Question

In my one web page i need to display two columns. I am using UL to display the list. While using the style display:inline-table with li, it doesn't work in iPhone4. In iphone3 it works well.

Expected output
Test1      Test2
Test3      Test4
Test5      Test6

But, in iPhone 4 it looks like

Test1
Test2
Test3
Test4
Test5
Test6

My Html is like this

<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>

I used the style below

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;
}

Any help is greatly appreciated.

Regards, Praji

Answer 1

It's a shot in the dark, but i'll bet the iPhone has pretty good CSS3 support:

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

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