3 ul 在一行中，如何证明在 div 的顶部开始？

Question

我有 3 个 ul 列表与 bootstrap 类 在线显示。 每个 ul 通过 Razor Engine foreach 从 db 获得一些链接，这些数据的数量不相等。我怎么能证明他们喜欢这张图片呢？

演示：http://jsfiddle.net/rygu8pqd/

                                        <ul style="text-align:center;list-style-type:none;">
                                            <li >
                                               <a>item1</a>
                                            </li>
                                            <li >
                                               <a>item1</a>
                                            </li>
                                        </ul>

                                </li>
                            </ul>
                            <ul style="border-right:2px red solid;border-left:2px red solid; text-align: center; list-style-type: none; display: inline-block" class="list-group ">


                                <li class="list-group-item">

                                        <ul style="text-align:center;list-style-type:none;">
                                            <li >
                                                <a>item2</a>
                                            </li>
                                            <li >
                                                <a>item2</a>
                                            </li>
                                             <li >
                                                <a>item2</a>
                                            </li>
                                        </ul>

                                </li>

                            </ul>
                            <ul style="text-align: center; list-style-type: none; display: inline-block" class="list-group">

                                <li class="list-group-item">

                                        <ul style="text-align:center;list-style-type:none;padding-top:15px;">
                                            <li>
                                               <a>item3</a>
                                            </li>
                                             <li>
                                               <a>item3</a>
                                            </li>
                                             <li>
                                               <a>item3</a>
                                            </li>
                                             <li>
                                               <a>item3</a>
                                            </li>
                                        </ul>

                                </li>
                            </ul>

Answer 1

试试这个 HTML代码：

<ul>
    <li><a href="">Item one</a></li>
    <li><a href="">Item two</a></li>
    <li><a href="">Item three</a></li>
</ul>
<ul>
    <li><a href="">Item one</a></li>
    <li><a href="">Item two</a></li>
    <li><a href="">Item three</a></li>
    <li><a href="">Item four</a></li>
    <li><a href="">Item five</a></li>
</ul>
<ul>
    <li><a href="">Item one</a></li>
    <li><a href="">Item two</a></li>
</ul>

CSS代码：

ul{
    list-style: none;
}

ul{
    display:inline-block;
    vertical-align: top;
    border:1px solid black;
    padding-left:0px;
}

ul li{
    padding:10px;
}

ul li a{
    text-decoration: none;
}

Answer 2

提供以下 CSS 作品：

ul {vertical-align: top;}

预览

Fiddle: http://jsfiddle.net/praveenscience/7bd1vh87/