html - 在另一个 DIV 中排列 DIV

Question

这是我的 HTML 代码:

<div id="upmenu">
    <div class="info" id="info-uberuns"><div>ubernus</div></div>
    <div class="info" id="info-consultant"><div>consultant</div></div>
</div>

这是 CSS 类:

.info{
    position: absolute;
    width: 130px;
    height: 47px;
    z-index: 0;  
    background: rgba(255,255,255,0.8);
    top: 13px;
    color: #3b3b3b;
    padding-top: 5px;
    line-height: 22px;
    font-size: 15px;
    cursor: pointer;
}    
.info div{
    margin-left: 20px;
}    
#upmenu{
    margin:auto;
    width:100%;
}

我想在带有 upmenu 类的 DIV 中排列带有信息类的 DIV，并并排显示它们。但问题是它们显示在彼此之上而不是并排显示。请帮我解决这个问题。

注册

Answer 1

尝试将以下内容添加到 .info 类中。

display: inline-block;
vertical-align: top;

同时从 .info 中删除 position: absolute;

http://jsfiddle.net/G3N24/