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%;
}

我想在DIV中使用upmenu类安排信息类的DIV，并将它们并排显示。但问题是它们彼此叠加而不是并排显示。请帮我解决这个问题。

Regads

Answer 1

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

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

同时从position: absolute;

中删除.info

http://jsfiddle.net/G3N24/

Answer 2

您可以将float：left添加到.info类。

Answer 3

您可以将div的显示属性设为inline-block，如mituw16所示，

OR

您可以将元素本身设为span，而无需更改任何样式。

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

JSFIDDLE

Answer 4

一种不同的方法......并不比其他建议更好。

FIDDLE

您可以使用CSS，无论如何都可以使用它。

HTML

<div id="upmenu">
  <div class="info" style="float: left;" id="info-uberuns">
    ubernus
  </div>
  <div class="info" style="float: right;" id="info-consultant">
    consultant
  </div>
</div>

CSS

#upmenu{
    border: 0px solid black;
    margin:20px auto;
    width:40%;
}
.info{
    background-color: blue;
    color: white;
    padding: 10px;
    line-height: 22px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 5px;
}

在另一个DIV中安排DIV

4 个答案: