並排不同列表html5

Question

我需要並列放置三個不同的列表：一個無序列表，一個有序列表和一個描述列表 我已經嘗試了很多不同的東西，但迄今爲止沒有浮動內聯或內聯塊正在工作，除非我做錯了，有人想解釋使用這些的正確方法。我嘗試的方式，它是

 #schedule { 
} 
#schedule ul { 
    list-style-type: none; 
    display: inline-block; 
} 
#schedule ol { 
    list-style-type: none; 
    display: inline-block; 
} 
#schedule dl { 
    list-style-type: none; 
    display: inline-block; 
} 

的CSS的

<aside id="schedule"> 
      <h2>Favourite Teachers</h2> 
      <ul> 
       <li>Steve Sutherland</li> 
       <li>Steve Sutherland</li> 
       <li>Steve Sutherland</li> 
      </ul> 
      <h2>Favourite Classes</h2> 
      <ol> 
       <li>Web Programming</li> 
       <li>Tim's</li> 
       <li>The Den</li> 
      </ol> 
      <h2>Favourite lessons</h2> 
      <dl> 
       <dt>First Webpage</dt> 
        <dd>Got me hooked</dd> 
       <dt>Images and videos</dt> 
        <dd>Endless joke possibilites</dd> 
      </dl> 
    </aside> 

Answer 1

總結他們在div和float div的。

<div class="first"> 
<ul>...</ul> 
</div> 

<div class="second"> 
<ol>...</ol> 
</div> 

<div class="third"> 
<dl>...</dl> 
</div> 

在CSS：

.first, .second, .third{ 
    float: left; 
    margin-right: 50px; 
} 

小提琴：http://jsfiddle.net/cmmabu8n/