0

私のラッパーは1000pxです。ナビゲーション バーとフッターをページ全体にするにはどうすればよいですか? ラッパーからナビゲーションとフッターを取り出してみると、何も中央に配置されません。

<html>
<head>
<meta charset="utf-8"/>
<title>  
</title>
</head>
<body>
    <div id="wrapper">
    </div>
</body>
</html>

CSS

*{
margin:0px;
padding:0px;
list-style-type:none;
}
body
{
background:white;
text-align:center;
font-family:Arial;
font-size:12px;
}
#wrapper
{
 width:1000px;
 margin:2px auto 2px auto;
 text-align:left;
 }
4

3 に答える 3

2

私が正しく理解している場合は、ラッパーの外側を作成して#nav、#footerこれを簡単にする必要があります。#wrapper両方にCSSと同じプロパティを指定してから#nav、#footer100% の幅を指定します。

jsfiddleを作成しました。実際の動作を確認するには、結果のウィンドウを拡張する必要があります。

HTML

<body>
    <div id="nav">
        Nav
    </div>
    <div id="wrapper">
        Wrapper
    </div>
    <div id="footer">
        Footer
    </div>
</body>

CSS

*{
  margin:0px;
  padding:0px;
  list-style-type:none;
}
body
{
  background:white;
  text-align:center;
  font-family:Arial;
  font-size:12px;
}
#wrapper, #nav, #footer
{
 width:1000px;
 margin:2px auto 2px auto;
 text-align:left;
 background-color: #eee;
 }

#nav, #footer {
 width: 100%;   
}
于 2013-09-13T22:00:06.020 に答える
2

ナビゲーションとフッターをラッパーの外に置きます。と：

#wrapper
{
 width:1000px;
 margin:2px auto 2px auto;
}

footer, #footer, .footer, nav .nav, #nav /* etc - whatever you're using */  {
 width:100%;
 text-align: center;
}

テキストだけでなく、すべてのコンテンツをこれらの領域に集中させたい場合。#wrapper を ID ( .wrapper ) ではないクラスに変更し、フッターまたはナビゲーション内に追加します。例えば

<footer>
 <div class='wrapper'>
  <!-- content here -->
 </div>
</footer>

少し不明確だったので、これがあなたの質問に答えてくれることを願っています。

于 2013-09-13T22:00:23.757 に答える
0

何が問題なのかわかりませんが、以下のコードを使用してみてください。私はこれがあなたが望むものだと思いますか？

<style>*{
margin:0px;
padding:0px;
list-style-type:none;
}
body
{
background:white;
text-align:center;
font-family:Arial;
font-size:12px;
border: 2px solid #222;
min-height:600px;
}
#wrapper
{
 width:1000px;
 margin:2px auto 2px auto;
 text-align:left;
 border: 2px solid #000;
 min-height:300px;
 }

 footer{
 border: 2px solid red;
 }
 </style>
 <html>
<head>
<meta charset="utf-8"/>
<title>  
</title>
</head>
<body>
    <div id="wrapper">
    wrapper
    </div>
    <footer>
    footer
    </footer>
</body>
</html>
于 2013-09-13T21:49:05.023 に答える