显示列表彼此相邻没有浮动

Question

我想显示无序列表彼此相邻，但不能让它工作，即使当我使用CSS规则来匹配它们显示的方式。

继承人我的代码：

<ul class="outterList"> 
    <li> 
     <span class="bigText">Main</span> 
    </li> 
    <li> 
     <span class="medText">Included</span> 
     <ul class="innerList"> 
      <li>TestMessage - text</li> 
      <li>bla - text</li> 
      <li>asffadgsd - text</li> 
      <li>iuygouhlubrsf - text</li> 
      <li>New Test - text</li> 
      <li>TestFileName - photo</li> 
      <li>TestFileName2 - photo</li> 
      <li>jvv - photo</li> 
      <li>ujjjjjjjjjjj - photo</li> 
      <li>MR. Bean - text</li> 
     </ul> 
    </li> 
</ul> 

我的CSS：

.outterList{ 
    display: inline ;  
} 

.innerList{ 
    display: block; 
} 

什么我试着去展现的是财产以后这样的：

 List1(empty list)   List2 

            *item1 

            *item2 

任何人知道如何解决这一问题？

Answer 1

.outterList{ 
    display: block; 
} 

.outterList > li { 
    display: inline-block; 
    vertical-align: top; 
} 

演示：http://jsfiddle.net/Q8qNj/4/