ホームページ作成についてです！ CSSでページ全体、ボディーの部分にwidthとmarginを指定し

締切済

質問者：ト琶
質問日時：2019/06/18 21:29
回答数：1件

ホームページ作成についてです！

CSSでページ全体、ボディーの部分にwidthとmarginを指定しているので中央寄せになっています。
ページ下部で、指定したwidthを超えてbackgroundで色を指定したいのですが、うまくいきません。［指定したwidth幅でしか色は反映されません。］
どうやったら、画面横幅いっぱいに指定できるのでしょうか…

また、全体を中央寄せにしているため、liの黒丸が離れて表示されます。
すぐ横に黒丸が来て欲しいのですが、自分はその箇所を横並びにしたいのでinline-blockにしています。
すると、黒丸は消えてしまいます。
どうやったら黒丸もありつつ横並びにできるでしょうか。

この２つ、どちらかでも、また両方わかるかたいたら教えてください！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： naokita
回答日時：2019/06/19 05:27

bodyに横幅を設定している１つのブロックなのだから、ご指定通りの幅内でしか表示できません・・・

（箱よりも大きい物は入らない）
なので、bodyに横幅は設置せずに（100％表示にしておく）
その直下に<div id="wrapper">や<div id="footer">を分けて設置して、各々を好みの幅にしてあげる二階建ての家のような感じ。
リストの黒丸は表示すればわかるでしょう。

<!DOCTYPE HTML>
<html lang="ja">
<style type="text/css">body{ margin: 0;}
#wrapper{ width:960px; margin: 0 auto; border:1px solid red; height: 200px;}
#footer{ background:yellow; height: 200px;}
ul li { display: inline-block;} ul li:before{ content: '\30FB ';}
</style>
</head>
<body>
<div id="wrapper">リストも色々な方法があるけど、インラインという事なら（::は互換で:）
<ul><li>あああ</li><li>いいい</li><li>ううう</li><li>えええ</li></ul>
</div>
<div id="footer">
<p>このHTMLを新規.htmlファイルで保存して表示すればわかります。</p>
</div>
</body>
</html>