html - 为什么这个DIV向下移动？

Question

我正在尝试使用DIV-s 构建一个简单的网站，由于某种原因，menu div向下移动了大约200px，这是什么原因造成的？

网站链接

JSFiddle

HTML：

<div id="titlediv"><!--Title-->
    <a href="Default.html"><img src="res1/title500x100.png" class="pagelogo"/></a>
</div>

<div id="container"><!--Full Width Content-->
    <div id="menu"><!--Title-->
        <ul class="tablemenu">
            <li><a href="Default.html" id="link">Home</a></li>
            <li><a href="#" id="link">Link1</a></li>
            <li><a href="#" id="link">Link2</a></li>
            <li><a href="#" id="link">Link3</a></li>
            <li><a href="#" id="link">Link4</a></li>
            <li><a href="#" id="link">Link5</a></li>
        </ul>
    </div>

    <div id="divider"><!--Black Divider-->
    </div>

    <div id="content"><!--Main Content-->
    </div>
</div>

CSS：

body{
    font-family: Arial, Helvetica, sans-serif;
}

#titlediv{
    width:100%;
    height:100px;
    display:block;
    text-align:center;
    background-color:red;
}

.pagelogo{
    max-height:100px;
}

#container{
    width:100%;
    height:500px;
    background-color:blue;
}

#menu{
    width:250px;
    height:100%;
    background-color:orange;
    display:inline-block;
}

#menu ul{
    list-style:none;
    text-align:right;
}

#menu a{
    font-size:40px;
    text-decoration: none;
    font-color:black;
    line-height: 50px;
    padding-right:10px;
    padding-left:10px;
    color:black;
    border-top-left-radius:8px;
    border-bottom-left-radius:8px;
}

#menu a:hover{
    background-color:#999967;
}

#divider{
    width:5px;
    height:500px;
    display:inline-block;
    background-color:black;
}

#content{
    width:500px;
    height:500px;
    display:inline-block;
    background-color:yellow;
}

div另外我希望-s的第二行（ Menu + divider + content）在blue中居中，我该怎么做？ #container div

Answer 1

菜单容器设置为display: inline-block，默认为vertical-align: bottom。您只需要添加以下内容：

#menu {
    vertical-align: top;
}

Answer 2

删除display: inline-block并float:left在#menu 和#divider 上使用。

要居中，请限制您的 #container 使其成为您想要的宽度，然后使用margin:0px auto（或使用div具有该边距属性的新容器）。

如果您在#menu 上使用边框或背景属性，您可能能够摆脱#divider，这取决于您想要该分隔线的用途。

Answer 3

菜单中的垂直移动是由display: inline-block;.css 的 CSS引起的#menu。如果需要使用inline-block也可以添加vertical-align: top;修复。