みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

リストを横並びさせた時にできた左端の余白を消したい

いつもお世話になっております。WEBサイト制作でご質問があります。
使用ソフトはDreamweaverCS5.5。個人的に公開するものなので、Chromeのみで確認しています。

リストを横並びにしてナビゲーションを作っているのですが、画像のように左端に余白ができてしまいナビゲーションが改行された状態になってしまいます。

【html】
<div id="hedder">
<ul class="navi">
<li class="top"><a href="#">top</a></li>
<li class="about"><a href="#">about</a></li>
<li class="profile"><a href="#">profile</a></li>
<li class="event"><a href="#">event</a></li>
<li class="link"><a href="#">link</a></li>
</ul><br clear="all" />
</div>

【CSS】
ul.navi {
list-style-type: none;
}
.navi li {
display: inline;
float: left;
}
.navi li a {
text-indent: -9999px;
display: block;
height: 78px;
}
.navi li.top a {
background-image: url(img/btn_top.gif);
width: 189px;
}
.navi li.about a {
background-image: url(img/btn_about.gif);
width: 190px;
}
.navi li.profile a {
background-image: url(img/btn_profile.gif);
width: 189px;
}
.navi li.event a {
background-image: url(img/btn_event.gif);
width: 189px;
}
.navi li.link a {
background-image: url(img/btn_link.gif);
width: 193px;
}

<div id="wrapper">で幅950pxの指定をしています。
よろしくお願いします。
(画像の青い四角は意図的にあとから加えた物なので本来のデザインではないものです。)

投稿日時 - 2014-01-03 22:23:29

QNo.8412317

すぐに回答ほしいです

質問者が選んだベストアンサー

marginで詰めてみては如何でしょうか。


ul.navi {
list-style-type: none;
margin-left: -20px;
}


数字は適当です。

投稿日時 - 2014-01-03 22:33:14

お礼

早急なご回答ありがとうございます!
おっしゃる通り、marginを-40px詰めたところ綺麗に横並びができました。
ありがとうございました!

投稿日時 - 2014-01-03 23:03:42

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

リストに標準で設定されているマージンが原因のようです。
liやulタグにmargin:0などと指定してマージンをなくしてみてください。

投稿日時 - 2014-01-03 23:00:46

お礼

早急なご回答ありがとうございます。
なるほど、marginが原因なのですね…。試してみたいと思います。ありがとうございました!

投稿日時 - 2014-01-03 23:05:35

あなたにオススメの質問