Html 在另一个DIV中安排DIV

这是我的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>

我想在带有upmenu类的DIV中安排带有info类的DIV，并将它们并排显示。 但问题是，它们被显示在彼此的顶部，而不是并排显示。 请帮我解决这个问题

---

Regads

尝试将以下内容添加到

.info

类中

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

同时移除

位置：绝对来自
.info

您可以将float:left添加到.info类。
或者您可以将
div
的显示属性设置为
内联块
，如mituw16所示

或

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

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


尤伯努斯
顾问

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


你可以玩CSS，让它看起来像你想要的任何东西

HTML

你看小提琴了吗？删除
位置：绝对
并添加
显示：内联块；垂直对齐：顶部
Dos work您使用绝对定位将两个div卡在同一位置。不要那样做。
<div id="upmenu">
  <span class="info" id="info-uberuns">ubernus</span>
  <span class="info" id="info-consultant">consultant</span>
</div>

<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>

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