Question

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

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（菜单 + 分隔符 + 内容）为在 blue #container div中居中，我该怎么做？

Answer 1

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

#menu {
    vertical-align: top;
}

Answer 2

菜单中的垂直移位是由display: inline-block;的CSS中的#menu引起的。如果您需要使用inline-block，还可以添加vertical-align: top;来修复它。

Answer 3

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

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

如果你在#menu上使用边框或背景属性，你可以摆脱#divider，这取决于你想要那个分隔符。

为什么这个DIV向下移动？

3 个答案: