1

-sを使用して単純な Web サイトを構築しようとしていますがDIV、何らかの理由で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 (メニュー+仕切り+コンテンツ)の 2 行目をblueの中央に配置したいのですが、どうすればよいですか? #container div

4

3 に答える 3

1

#menu と #divider で削除display: inline-blockして使用します。float:left

中央に配置するには、#container を希望の幅に制限してから使用(またはそのマージン プロパティでmargin:0px autonewを使用) します。div

#menu で境界線または背景のプロパティを使用すると、#divider を取り除くことができる場合があります。

于 2013-05-31T10:34:07.177 に答える