Html 显示：内联块如何在同一级别中定位div

在另一个div中有两个分区，该分区也由一个div包裹

<div id="main">
    <div id="wrap">
        <div id="content">
            Hello how are you<br/>   
            Hello how are you<br/>
            Hello how are you<br/>    
        </div>
        <div id="nav">
            <div id="menu">
                <ul>
                    <li><a href="#page1">PAge1</a></li>
                    <li><a href="#page1">PAge1</a></li>
                    <li><a href="#page1">PAge1</a></li>
                    <li><a href="#page1">PAge1</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

现在的问题是为什么水平菜单不在段落开头的同一行

这是小提琴：

---

我希望两个div都在同一行开始，而不使用float:left

根据您写“同一行”的想法，我建议对内联块元素使用

垂直对齐：top

或

垂直对齐：bottom

在您的情况下，我会将该属性添加到

#content

和

#nav

元素中，如下所示：

#content {
    ....
    vertical-align: top;
}

#nav{
    ....
    vertical-align: top;
}

以下是JSFIDLE的更新：

---

CSS:

#wrap
{
    width: 100%; 
    margin: 0 auto; 
    text-align:center;

}
#content
{
    background-color:yellow;
    width:30%;
   vertical-align: top;
}

#main
{
    width:100%;
    padding:0px;
    margin:0px;
    background-color:red;
    padding:10px; 
}
#main div div
{
    display:inline-block;

}

#nav
{
    margin-left:30px;
    vertical-align: top;
}

ul
{
    padding:0px;
    margin:0px;
    list-style-type:none;
}
#menu li
{
    display:inline-block;
    padding:5px;
    border:1px solid yellow;
}
#menu li a
{
 text-decoration:none;   
    color:yellow;
}

#content {
    ....
    vertical-align: top;
}

#nav{
    ....
    vertical-align: top;
}

HTML:

<div id="main">
    <div id="wrap">
    <div id="content">
        Hello how are you<br/>   
        Hello how are you<br/>    Hello how are you<br/>    
    </div>
        <div id="nav">
    <div id="menu">
        <ul>
            <li><a href="#page1">PAge1</a></li>
            <li><a href="#page1">PAge1</a></li>
            <li><a href="#page1">PAge1</a></li>
            <li><a href="#page1">PAge1</a></li>
        </ul>
            </div>
    </div>
    </div>
</div>

---

请尝试使用此代码将资源中心垂直对齐

#内容#导航{
垂直对齐：中间对齐；
}

试试这个

#content, #nav {
  margin: 0px auto;
}

或

---

很抱歉迟了回复，谢谢你的代码，这是我想要的expected@musthafa令人惊讶的是：这是我看到的第一个问题，没有任何投票就有了所有答案，同时问题本身也没有得到任何答案。一个问题，四个答案，零票！至少，你可以接受这个答案，因为它似乎是帮助你的答案。

#content, #nav {
  margin: 0px auto;
}

#content, #nav {
  vertical-align: middle;
}