div内的div的内联显示

Question

我有一个HTML页面，结构如下：

<div id="frst">
FIRST
</div>
<div id="top">
    <div id="mid">
        <div id="bottom">
            <ul class="menu">
                <li>A</li>
                <li>A</li>
                <li>A</li>
            </ul>    
        </div>
    </div>
</div>   

我写的CSS：

#frst{
display:inline;
}
#top,#mid,#bottom{
display:inline;
}
.menu li
{
    display:inline;
}

我想显示内嵌id first和top的div。但它在div top下面显示first div！我怎样才能让它们内联？

Answer 1

试试这个：

使用display:inline-block;

#top{
  display:inline-block;
}

Example