0

ロゴとメニューがページの中央に配置されるヘッダーを作成しようとしていますが、メニュー div の背景色が画面の右側に拡張されています。

http://jsfiddle.net/gKnuY/777/、

HTML

<div id="wrap" align="center">
    <div id="header" >
        <div class="header-logo">
            Logo Here
        </div>
        <div class="header-menu">
            ABOUT | CARREERS | PRODUCTS | SOMTETHING | OTHER
        </div>
    </div>    

    <div id="main"></div>
</div>

CSS

*{
    margin:0px;
}
html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 70px;} 

#footer {position: relative;
    margin-top: -70px; 
    height: 70px;
    background-color:#383838;
    -webkit-box-shadow: 0px -10px 5px 5px #cacaca;
    box-shadow: 0px -10px 5px 5px #cacaca;
    clear:both;} 
#header {
    height:100px;
    left:0px;
    right:0px;
    width:960px;
}
.header-logo {
    position: relative;
    float:left;
    background-color:#654654;
    width:200px;
    height:100px;

}
.header-menu {
    position:relative;
    text-align:left;
    float:left;
    height:100px;
    background-color:#383838;
    -webkit-box-shadow:  0px 30px 5px 0px #cacaca;
    box-shadow:  0px 30px 5px 0px #cacaca;
}

これについてどうすればいいですか？

ありがとう

4

1 に答える 1

0

leftヘッダーのメイン コンテナーでは、一定の量を保持しながら 100% 拡張する必要があります。

これが私が変えたものです

#header {
  height:100px;
  left: 40%;
  width:100%;
  position: relative;
  background: #383838;
}

JSFIDDLE

于 2013-11-09T00:58:07.447 に答える