cssで余白を設定してリストタグを使ってバナーを作ろうとしたのですがcssで設定した余白が無視されてしまいます。2カラムレイアウトで右と左に30pxの余白を設定しています。
背景色を使ってアクアの色をつけてcssで設定したdiv#left自体は30pxの余白が右側に空いています。
しかしリストタグを使ってバナーの箱を設定するとバナーの箱が余白なしで作られてしまいます。
リストタグのcssにmarginやpaddingを使ってみましたが余白を空けることはできませんでした。
cssやhtml以外の知識が必要でしょうか?
上がhtmlで下がcssです。
よろしくお願いいたします。
<!-- leftここから --> <div id="left"> <ul> <li><a href="#">お電話でのご予約はこちら</a></li> <li><a href="#">院長のブログ</a></li> <li><a href="#">お客様の声</a></li> </ul> </div> <!-- leftここまで --> <!-- rightここから --> <div id="right"></div> <!-- rightここまで --> <div class="clearfix"></div>
/* ======================================== レフト ========================================= */ div#left{ width: 280px; height: 300px; background-color: aqua; float: left; margin-right: 30px; } div#left ul{ margin-right: 30px; } div#left ul li{ width: 280px; height: 50px; background-color: #f5fbff; margin-bottom: 10px; border: 1px solid #63abd4; } div#left ul li a{ font-size: 16px; font-weight: bold; color: #555555; text-decoration: none; line-height: 50px; background: url(images/icon_tel.png) no-repeat 15px center; display: block; padding-left: 47px; } /* ======================================== ライト ========================================= */ div#right{ width: 650px; height: 300px; background-color: gray; float: left; } /* ======================================== フロート解除 ========================================= */ div.clearfix{ clear: both; } コード
回答2件
あなたの回答
tips
プレビュー