Question

在另一个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>

所以其中一个分区包含一些上面提到的段落你好，你是另一个是水平菜单

所以这是我的CSS代码

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

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

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

#main div div
{
    display: inline-block;
}

#nav
{
    margin-left: 30px;
}

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

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

这是小提琴：http://jsfiddle.net/mohamedmusthafac/DW52N/15/

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

Answer 1

根据您写的＆＃34;同一行＆＃34;的具体情况，我建议使用vertical-align: top或vertical-align: bottom作为内联块元素。

在您的情况下，我会将该属性添加到#content和#nav元素，如下所示：

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

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

这里有更新jsfiddle：

http://jsfiddle.net/DW52N/17/

Answer 2

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

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>

看看它会起作用。

将这些属性添加到您的ID

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

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

Answer 3

尝试使用此代码将内容垂直对齐。

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

Answer 4

试试这个

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

或

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

display：inline-block如何将div定位在同一级别

4 个答案: